/* Custom Styles for Natural Disasters in Israel & Jerusalem Platform */

:root {
  --primary: #20beff;
  --primary-dark: #0088cc;
  --kaggle-blue: #20beff;
  --bg-dark: #0f172a;
  --card-dark: #1e293b;
}

body {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  background: #f4f5f7;
}

/* Jerusalem AI site look: soft shadowed cards, pill buttons, orange focus */
::selection { background: #ff7a1a; color: #fff; }
:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }
.nds-card, .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-slate-50.rounded-lg.border {
  background: #fff;
  border-color: transparent !important;
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(18, 19, 22, 0.03), 0 14px 40px -20px rgba(18, 19, 22, 0.22);
}
.nds-pill {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; white-space: nowrap;
  height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #e1e4e8; background: #fff; color: #121316;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .25s, background-color .25s, color .25s;
}
.nds-pill:hover { border-color: #121316; }
.nds-pill-solid { background: #121316; color: #f4f5f7; border-color: #121316; }
.nds-pill-solid:hover { background: #3a3d44; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Drawer Transitions */
#detailDrawer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#detailDrawer.translate-x-full {
  transform: translateX(100%);
}
#detailDrawer:not(.translate-x-full) {
  transform: translateX(0);
}

/* Map Container */
#disasterMap {
  min-height: 520px;
  width: 100%;
  border-radius: 0.75rem;
  z-index: 10;
}

/* Leaflet Custom Marker Pins */
.custom-hazard-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  border: 2px solid white;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.custom-hazard-pin:hover {
  transform: scale(1.25);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 9999 !important;
}

/* Category Colors */
.pin-earthquake { background: #7c3aed; }
.pin-winter-storm { background: #0284c7; }
.pin-wildfire { background: #dc2626; }
.pin-flash-flood { background: #2563eb; }
.pin-extreme-heat { background: #ea580c; }
.pin-sinkhole { background: #d97706; }
.pin-river-flood { background: #0891b2; }
.pin-drought { background: #b45309; }
.pin-tsunami { background: #4338ca; }

/* Pulse animation for high severity */
@keyframes pin-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.pin-catastrophic {
  animation: pin-pulse 2s infinite;
}

/* Tab Active Styles */
.tab-btn.active {
  border-color: #20beff;
  color: #0284c7;
  font-weight: 600;
  background-color: #f0f9ff;
}

/* Code block highlight */
pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Mobile: keep the header action buttons on one scrollable row instead of widening the page */
.header-actions > * { flex-shrink: 0; white-space: nowrap; }
.header-actions { scrollbar-width: none; }
.header-actions::-webkit-scrollbar { display: none; }