/* ==========================================================================
   GISTDA DESIGN SYSTEM & THEME TOKENS
   Disaster Decision Support System Styling (disaster.gistda.or.th/dashboard)
   ========================================================================== */

:root {
  --background-paper: #ffffff;
  --background-default: #edf0f7;
  --background-primary: #f7f9ff;
  --background-secondary: #edf2fe;
  --primary-main: #306bec;
  --primary-light: #6482e4;
  --primary-dark: #2e499f;
  --primary-contrast-text: #ffffff;
  --text-primary: #363636;
  --text-secondary: #757575;
  --text-disabled: #d9d9d9;
  --gray-gray1: #f5f5f5;
  --gray-gray2: #e6e6e6;
  --gray-gray3: #d9d9d9;
  --gray-gray4: #b3b3b3;
  --gray-gray5: #757575;
  --gray-gray6: #444444;
  --gray-gray7: #383838;
  --gray-gray8: #2c2c2c;
  --gray-gray9: #1e1e1e;
  --gray-gray10: #111111;
  --card-radius: 18px;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

body {
  background-color: var(--background-default);
  color: var(--text-primary);
  font-family: 'Kanit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(48, 107, 236, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #306bec;
}

/* GISTDA Card Base */
.gistda-card {
  background-color: var(--background-paper);
  border: 1px solid #e2e8f0;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: all 0.2s ease-in-out;
}
.gistda-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* GISTDA Metric KPI Card */
.metric-kpi-card {
  background-color: var(--background-paper);
  border: 1px solid #e2e8f0;
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(48, 107, 236, 0.08);
}

/* Pulsos de Radar para Pines GIS */
.radar-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.radar-pin:hover {
  transform: scale(1.25);
  z-index: 1000 !important;
}
.radar-pin::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pulse-ring 2.2s infinite;
  z-index: -1;
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.9; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

.radar-pin.critical { 
  background: #ef4444; 
  border-color: #ffffff; 
  box-shadow: 0 0 14px #ef4444; 
}
.radar-pin.critical::after { border: 2px solid #ef4444; }

.radar-pin.warning { 
  background: #f59e0b; 
  border-color: #ffffff; 
  box-shadow: 0 0 14px #f59e0b; 
}
.radar-pin.warning::after { border: 2px solid #f59e0b; }

.radar-pin.safe { 
  background: #10b981; 
  border-color: #ffffff; 
  box-shadow: 0 0 14px #10b981; 
}
.radar-pin.safe::after { border: 2px solid #10b981; }

.radar-pin.hotel { 
  background: #306bec; 
  border-color: #ffffff; 
  box-shadow: 0 0 14px #306bec; 
}
.radar-pin.hotel::after { border: 2px solid #306bec; }

/* Custom Leaflet Tooltip & Popup (Light Modern GISTDA Style) */
.leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
  padding: 4px;
}
.leaflet-popup-tip {
  background: #ffffff !important;
}
.leaflet-popup-content {
  margin: 10px 12px !important;
  line-height: 1.45 !important;
  font-family: 'Kanit', sans-serif !important;
}

/* Radar Scanline Animation */
.radar-sweep-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #306bec, #38bdf8, transparent);
  box-shadow: 0 0 10px #306bec;
  opacity: 0.8;
  animation: scan 4s linear infinite;
  pointer-events: none;
  z-index: 400;
}

@keyframes scan {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

/* AI Copilot Drawer Animations */
.copilot-bubble-user {
  background: var(--primary-main);
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  font-size: 0.875rem;
}
.copilot-bubble-agent {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid #e2e8f0;
  border-radius: 16px 16px 16px 4px;
  font-size: 0.875rem;
}
.copilot-bubble-agent strong {
  color: #0f172a !important;
}
.copilot-bubble-agent em {
  color: #306bec !important;
}

/* Highcharts container styling */
.highcharts-container {
  font-family: 'Kanit', 'Inter', sans-serif !important;
}
.highcharts-credits {
  display: none !important;
}

/* Print Friendly Layout */
@media print {
  header, nav, #mapContainer, .filter-btn, button, #copilotDrawer, #copilotTriggerBtn {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  #printableEmergencyCard {
    display: block !important;
  }
}