:root{
  --header-bg:#003366;              /* dark header */
  --accent:#1E90FF;                 /* unified lighter blue */
  --accent-dark:#1a7bdc;
  --text:#111;
  --white:#fff;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text);
  background:#f4f7fb;
}

/* Header */
.main-header{
  position:relative;
  z-index:100;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:var(--header-bg);
  color:var(--white);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.header-left{ display:flex; align-items:center; gap:8px; font-weight:700; }
.brand{ font-size:16px; }
.header-middle{
  justify-self:center; font-size:14px; text-align:center; color:#cfe4ff;
}
.header-middle a{ color:#ffd24a; font-weight:700; text-decoration:none; }
.header-middle a:hover{ text-decoration:underline; }

.header-right{ justify-self:end; }
.date-picker-wrap{
  position:relative; display:inline-flex; align-items:center;
  background:var(--white); border:2px solid var(--accent); border-radius:8px; padding:2px 36px 2px 10px;
  box-shadow:0 2px 5px rgba(0,0,0,.15);
}
#date-picker{
  border:0; outline:none; font-weight:700; font-size:14px; width:130px; cursor:pointer; text-align:center; background:transparent;
}
#calendar-icon{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; background:transparent; cursor:pointer;
  /* Blue calendar SVG */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%231E90FF'><path d='M7 2a1 1 0 0 0-1 1v1H5a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3h-1V3a1 1 0 1 0-2 0v1H8V3a1 1 0 0 0-1-1zm12 7H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9z'/></svg>");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* Map */
#map{ height:calc(100vh - 56px); width:100%; }

/* Status container */
#status-container{
  position:fixed; left:12px; bottom:12px; z-index:1000;
}

/* Collapsed pill (shown only when collapsed) */
#status-pill{
  display:none;
  background:var(--accent); color:var(--white);
  border:0; border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Expanded bar */
#status-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--white);
  padding:8px 12px; border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.25); max-width:min(92vw, 720px);
}
#status-text{ font-size:14px; }
.status-actions{ display:flex; align-items:center; gap:6px; }
.btn{
  background:var(--white); color:var(--accent);
  border:0; border-radius:8px; font-weight:700; padding:6px 10px; cursor:pointer;
}
.btn:hover{ background:#eef5ff; }
#collapse-btn{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); }
#collapse-btn:hover{ background:rgba(255,255,255,.1); }

/* Collapsed state */
#status-container.collapsed #status-bar{ display:none; }
#status-container.collapsed #status-pill{ display:inline-block; }

/* Responsive: collapse by default on small screens */
@media (max-width: 768px){
  .header-middle{ display:none; }          /* save space on phones */
}
/* Popup container styling */
.leaflet-popup-content-wrapper.quake-popup-container {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  padding: 6px;
  opacity: 0;
  transform: translateY(10px);
  animation: quakePopupFadeIn 0.3s ease forwards;
}

/* Inner content */
.quake-popup {
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: #333;
}

.quake-popup h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: bold;
  color: #0077cc;
}

.quake-popup p {
  margin: 2px 0;
  line-height: 1.4;
}

/* Smooth fade-in + slide-up */
@keyframes quakePopupFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-out effect */
.leaflet-fade-anim .leaflet-popup {
  transition: opacity 0.25s ease-in-out;
}