/* UFO/UAP map site */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial,
               sans-serif;
  background: #0b1320; color: #e8eef9;
  overflow: hidden;
}

/* Top bar */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 60px; padding: 8px 16px;
  background: linear-gradient(180deg, #0b1320 0%, #131e35 100%);
  border-bottom: 1px solid #2a3a5a;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
#topbar h1 {
  margin: 0; font-size: 18px; color: #82b9ff; font-weight: 600;
}
#topbar-right {
  display: flex; align-items: center; gap: 16px;
}
#meta {
  font-size: 12px; color: #8fa3c4;
}
#meta a { color: #82b9ff; text-decoration: none; }
#meta a:hover { text-decoration: underline; }

/* Language toggle */
#lang-toggle {
  display: inline-flex; gap: 0;
  border: 1px solid #2a3a5a; border-radius: 4px;
  overflow: hidden;
}
.lang-btn {
  background: rgba(11, 19, 32, 0.4);
  color: #8fa3c4; border: none;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  min-width: 36px; font-family: inherit;
}
.lang-btn:hover { background: rgba(130, 185, 255, 0.15); color: #e8eef9; }
.lang-btn.active {
  background: #82b9ff; color: #0b1320;
}
.lang-btn + .lang-btn { border-left: 1px solid #2a3a5a; }

/* Sidebar */
#sidebar {
  position: absolute; top: 60px; left: 0; bottom: 0;
  width: 280px; padding: 16px;
  background: rgba(15, 26, 47, 0.95);
  border-right: 1px solid #2a3a5a;
  overflow-y: auto;
  z-index: 999;
}
#sidebar h2 {
  margin-top: 0; font-size: 14px; color: #82b9ff;
  text-transform: uppercase; letter-spacing: 1px;
}
.filter-group { margin-bottom: 16px; }
.filter-group > label {
  display: block; font-size: 12px; color: #8fa3c4; margin-bottom: 6px;
  font-weight: 500;
}
.date-range {
  display: flex; align-items: center; gap: 6px;
}
.date-range input {
  width: 60px; padding: 4px 6px; background: #0b1320;
  border: 1px solid #2a3a5a; border-radius: 3px;
  color: #e8eef9; font-size: 12px;
}
.date-range span { color: #8fa3c4; }

#agency-checkboxes, #type-checkboxes {
  max-height: 140px; overflow-y: auto;
  background: rgba(0,0,0,0.2); padding: 6px;
  border: 1px solid #2a3a5a; border-radius: 3px;
}
label.cb {
  display: block; font-size: 12px;
  color: #e8eef9; padding: 2px 0; cursor: pointer;
}
label.cb input { margin-right: 6px; }

#stats-panel { font-size: 12px; }
#visible-count {
  font-size: 18px; font-weight: bold; color: #82b9ff;
  margin: 4px 0;
}
#region-stats {
  max-height: 200px; overflow-y: auto; font-size: 11px;
  margin-top: 6px;
}
.region-row {
  display: flex; justify-content: space-between;
  padding: 2px 0; border-bottom: 1px solid #1a2745;
}
details summary { cursor: pointer; color: #82b9ff; padding: 4px 0; }

/* Other Events panel */
#other-events-panel details summary {
  font-size: 12px; color: #82b9ff; padding: 6px 0;
  user-select: none;
}
.other-events-badge {
  color: #6a7c9c; font-size: 11px; margin-left: 4px;
}
.other-events-list {
  max-height: 280px; overflow-y: auto; margin-top: 6px;
  background: rgba(0,0,0,0.2); padding: 4px;
  border: 1px solid #2a3a5a; border-radius: 3px;
}
.other-row {
  padding: 6px 8px; border-bottom: 1px solid #1a2745;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 11px;
}
.other-row:last-child { border-bottom: none; }
.other-row:hover {
  background: rgba(130, 185, 255, 0.12);
}
.other-row-line {
  display: flex; justify-content: space-between; align-items: center;
}
.other-date {
  color: #82b9ff; font-weight: 600; font-variant-numeric: tabular-nums;
}
.other-icons { font-size: 11px; opacity: 0.85; }
.other-loc {
  color: #e8eef9; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.other-meta {
  color: #6a7c9c; font-size: 10px; margin-top: 1px;
}

/* Media block (image / video) inside detail panel */
.media-block {
  margin: 12px 0; padding: 8px;
  background: rgba(0,0,0,0.3);
  border-left: 3px solid #82b9ff;
  border-radius: 3px;
}
.media-block-title {
  font-size: 12px; color: #c8d6f0; margin-bottom: 6px;
}

/* ===== Timeline page ===== */
body.timeline-page { overflow: auto; }
body.timeline-page #topbar {
  position: sticky; top: 0;
}
body.timeline-page #topbar h1 a.back-link {
  text-decoration: none; color: #82b9ff;
}

#timeline-toolbar {
  position: sticky; top: 60px;
  z-index: 800;
  background: rgba(15, 26, 47, 0.97);
  border-bottom: 1px solid #2a3a5a;
  padding: 12px 24px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.tl-filter-cell { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8fa3c4; }
.tl-filter-cell label { color: #8fa3c4; }
.tl-filter-cell input[type="text"], .tl-filter-cell select {
  background: #0b1320; border: 1px solid #2a3a5a; border-radius: 3px;
  color: #e8eef9; padding: 4px 8px; font-size: 12px;
  font-family: inherit;
}
.tl-filter-cell select { min-width: 140px; }
#tl-search { min-width: 200px; }
.tl-filter-cell.tl-grow { flex: 1; min-width: 220px; }
.tl-filter-cell.tl-grow input { flex: 1; }
#tl-visible-count { color: #82b9ff; font-weight: 600; }

#timeline-container {
  position: relative;
  padding: 0 24px 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.tl-decade-jump {
  position: sticky;
  top: 120px;
  z-index: 750;
  background: rgba(11, 19, 32, 0.95);
  padding: 10px 0;
  margin: 0 -24px 12px;
  padding: 10px 24px;
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid #1a2745;
}
.tl-decade-chip {
  background: rgba(130,185,255,0.08);
  border: 1px solid #2a3a5a;
  color: #c8d6f0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tl-decade-chip:hover { background: rgba(130,185,255,0.2); color: #fff; }
.tl-decade-chip span { color: #6a7c9c; }
.tl-decade-anchor { height: 1px; margin-top: -120px; padding-top: 120px; }

.tl-year-section { margin: 16px 0 28px; }
.tl-year-header {
  font-size: 22px; color: #82b9ff; margin: 0 0 12px 0;
  padding-bottom: 4px; border-bottom: 2px solid #2a3a5a;
  font-variant-numeric: tabular-nums;
}
.tl-year-count { color: #6a7c9c; font-size: 14px; font-weight: normal; }

.tl-event-list { list-style: none; margin: 0; padding: 0; }

.tl-event-row {
  display: grid;
  grid-template-columns: 16px 110px 1fr;
  gap: 12px;
  padding: 12px 14px;
  margin: 6px 0;
  background: rgba(15, 26, 47, 0.6);
  border: 1px solid #1a2745;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  align-items: start;
}
.tl-event-row:hover {
  background: rgba(130, 185, 255, 0.08);
  border-color: #2a3a5a;
  transform: translateX(2px);
}
.tl-row-marker {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ff6b6b; margin-top: 4px;
  box-shadow: 0 0 8px rgba(255,107,107,0.4);
}
.tl-marker-fbi { background: #ffd93d; box-shadow: 0 0 8px rgba(255,217,61,0.4); }
.tl-marker-usaf { background: #6bcb77; box-shadow: 0 0 8px rgba(107,203,119,0.4); }
.tl-marker-dow { background: #82b9ff; box-shadow: 0 0 8px rgba(130,185,255,0.4); }
.tl-marker-nasa { background: #ff9f6b; box-shadow: 0 0 8px rgba(255,159,107,0.4); }

.tl-row-date {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 13px; color: #82b9ff;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.tl-row-loc {
  font-size: 14px; color: #e8eef9; font-weight: 600;
  margin-bottom: 4px;
}
.tl-row-meta {
  font-size: 11px; color: #8fa3c4;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 4px;
}
.tl-agency, .tl-type {
  background: rgba(130,185,255,0.08);
  padding: 1px 6px; border-radius: 2px;
}
.tl-tag {
  background: rgba(255,107,107,0.15);
  color: #ff9999;
  padding: 1px 6px; border-radius: 2px; font-size: 10px;
}
.tl-tag-other { background: rgba(130,185,255,0.15); color: #82b9ff; }
.tl-icons { margin-left: auto; }
.tl-row-title {
  color: #c8d6f0; font-size: 12px; line-height: 1.4;
  opacity: 0.85;
}

.tl-empty {
  padding: 40px; text-align: center; color: #6a7c9c;
  font-size: 13px;
}

@media (max-width: 700px) {
  #timeline-toolbar { padding: 10px 14px; gap: 10px; }
  #timeline-container { padding: 0 14px 40px; }
  .tl-event-row { grid-template-columns: 16px 90px 1fr; }
  .tl-decade-jump { top: 158px; }
}
hr { border: 0; border-top: 1px solid #2a3a5a; margin: 16px 0; }
.footer { font-size: 11px; color: #6a7c9c; }
.footer a { color: #82b9ff; }
.footer a.nav-link {
  display: inline-block;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: rgba(130, 185, 255, 0.1);
  border: 1px solid #2a3a5a;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  transition: background 0.12s;
}
.footer a.nav-link:hover {
  background: rgba(130, 185, 255, 0.25);
}

/* Visitor counter */
.visitor-counter {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(130, 185, 255, 0.08);
  border-left: 2px solid #82b9ff;
  border-radius: 2px;
  font-size: 11px;
  color: #c8d6f0;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.visitor-counter.ready { opacity: 1; }
.visitor-counter .num {
  color: #82b9ff; font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Map */
#map {
  position: absolute; top: 60px; left: 280px; right: 0; bottom: 0;
  background: #08111e;
}

/* Detail panel (right-side) */
#detail-panel {
  position: absolute; top: 60px; right: 0; bottom: 0;
  width: 420px; padding: 20px;
  background: rgba(15, 26, 47, 0.98);
  border-left: 1px solid #2a3a5a;
  overflow-y: auto;
  z-index: 1100;
  box-shadow: -2px 0 12px rgba(0,0,0,0.5);
  transition: transform 0.25s ease;
}
#detail-panel.hidden {
  transform: translateX(100%);
}
#detail-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; color: #82b9ff;
  font-size: 24px; cursor: pointer; padding: 4px 8px;
}
#detail-close:hover { color: #fff; }
#detail-content h3 {
  margin: 0 0 10px 0; color: #82b9ff; font-size: 16px;
  padding-right: 30px;
}
#detail-content .date-badge {
  display: inline-block; background: #82b9ff; color: #0b1320;
  padding: 2px 8px; border-radius: 3px; font-weight: bold;
  font-size: 13px; margin-bottom: 8px;
}
#detail-content .meta-row {
  font-size: 12px; color: #8fa3c4;
  margin: 4px 0; padding: 2px 0;
}
#detail-content .meta-row strong { color: #c8d6f0; }
#detail-content .full-text {
  margin: 12px 0; padding: 10px;
  background: rgba(0,0,0,0.3); border-left: 3px solid #82b9ff;
  border-radius: 3px;
  font-size: 12px; line-height: 1.5; color: #c8d6f0;
  max-height: 200px; overflow-y: auto;
}
#detail-content .archive-link {
  display: inline-block; margin-top: 8px;
  background: #82b9ff; color: #0b1320;
  padding: 8px 14px; border-radius: 4px;
  text-decoration: none; font-weight: 600; font-size: 13px;
}
#detail-content .archive-link:hover { background: #a0cdff; }
#detail-content .archive-link.small {
  background: transparent; color: #82b9ff; border: 1px solid #82b9ff;
  font-size: 11px; padding: 4px 8px;
}

/* Leaflet override (dark theme) */
.leaflet-control-attribution {
  background: rgba(11, 19, 32, 0.85) !important;
  color: #8fa3c4 !important;
}
.leaflet-control-attribution a { color: #82b9ff !important; }

.leaflet-popup-content-wrapper {
  background: rgba(15, 26, 47, 0.95) !important;
  color: #e8eef9 !important; border: 1px solid #2a3a5a;
}
.leaflet-popup-tip { background: rgba(15, 26, 47, 0.95) !important; }
.leaflet-popup-content {
  margin: 10px 14px; font-size: 12px; line-height: 1.4;
}
.leaflet-tooltip {
  background: rgba(11, 19, 32, 0.95) !important;
  border: 1px solid #2a3a5a !important;
  color: #e8eef9 !important; font-size: 11px !important;
}
.leaflet-tooltip-top:before { border-top-color: rgba(11, 19, 32, 0.95) !important; }

/* Custom marker for events */
.uap-marker {
  background: radial-gradient(circle, #ff6b6b 30%, rgba(255,107,107,0.3) 70%, transparent 100%);
  border: 2px solid #ff6b6b;
  border-radius: 50%;
  width: 14px !important; height: 14px !important;
  margin-left: -7px !important; margin-top: -7px !important;
  box-shadow: 0 0 10px rgba(255,107,107,0.6);
}
.uap-marker.fbi { background: radial-gradient(circle, #ffd93d 30%, rgba(255,217,61,0.3) 70%, transparent 100%); border-color: #ffd93d; box-shadow: 0 0 10px rgba(255,217,61,0.6); }
.uap-marker.usaf { background: radial-gradient(circle, #6bcb77 30%, rgba(107,203,119,0.3) 70%, transparent 100%); border-color: #6bcb77; box-shadow: 0 0 10px rgba(107,203,119,0.6); }
.uap-marker.dow { background: radial-gradient(circle, #82b9ff 30%, rgba(130,185,255,0.3) 70%, transparent 100%); border-color: #82b9ff; box-shadow: 0 0 10px rgba(130,185,255,0.6); }
.uap-marker.nasa { background: radial-gradient(circle, #ff9f6b 30%, rgba(255,159,107,0.3) 70%, transparent 100%); border-color: #ff9f6b; box-shadow: 0 0 10px rgba(255,159,107,0.6); }

/* Legend */
#legend {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(15, 26, 47, 0.92);
  padding: 10px 14px; border-radius: 4px;
  border: 1px solid #2a3a5a;
  font-size: 11px; color: #c8d6f0;
  z-index: 800;
}
#legend h4 {
  margin: 0 0 6px 0; font-size: 12px; color: #82b9ff;
  text-transform: uppercase;
}
#legend .leg-row {
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
}
#legend .swatch {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}

/* Responsive */
@media (max-width: 900px) {
  #sidebar { width: 220px; }
  #map { left: 220px; }
  #detail-panel { width: 320px; }
}
@media (max-width: 600px) {
  #topbar h1 { font-size: 14px; }
  #meta { display: none; }
  #sidebar { width: 60%; }
  #map { left: 60%; }
  #detail-panel { width: 100%; }
}