/* StormSense — Phase 1 custom styles (Tailwind utilities remain in HTML via CDN). */

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.pulse-glow {
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)); }
  50% { opacity: 0.5; transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.9)); }
}

.radar-sweep-pro {
  background: conic-gradient(from 0deg, rgba(239, 68, 68, 0) 0deg, rgba(239, 68, 68, 0.05) 45deg, rgba(239, 68, 68, 0.35) 90deg, rgba(239, 68, 68, 0) 90.1deg);
  animation: radar-sweep 5s linear infinite;
}

@keyframes radar-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0b0f19;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

.operational-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: rgba(6, 182, 212, 0.08);
  border-bottom: 1px solid rgba(6, 182, 212, 0.25);
  color: #38bdf8;
  font-size: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}

.mode-banner-live {
  background: rgba(16, 185, 129, 0.08);
  border-bottom: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.mode-banner-historical {
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

/* Mode Switch Button */
.btn-mode-switch {
  transition: all 0.2s ease-in-out;
}
.btn-mode-switch:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* Status Indicators */
.status-dot-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.status-dot-offline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.status-dot-loaded {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #06b6d4;
  box-shadow: 0 0 6px #06b6d4;
}

/* Global IST Clock Footer */
#global-clock-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  background: rgba(11, 15, 25, 0.92);
  border-top: 1px solid rgba(51, 65, 85, 0.6);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* StormSense — Leaflet Interactive Map styling */
#map-radar-placeholder.leaflet-container,
#radar-map-container.leaflet-container,
#map-live-container.leaflet-container {
  background: #070b12;
  font-family: inherit;
  outline: none;
}

#map-radar-placeholder .leaflet-tile-pane,
#radar-map-container .leaflet-tile-pane,
#map-live-container .leaflet-tile-pane {
  filter: brightness(0.95) contrast(1.05);
}

#map-radar-placeholder .leaflet-control-attribution,
#radar-map-container .leaflet-control-attribution,
#map-live-container .leaflet-control-attribution {
  background: rgba(11, 15, 25, 0.85) !important;
  color: #64748b !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  border-radius: 6px !important;
  margin: 0 8px 8px 0 !important;
  padding: 2px 6px !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(51, 65, 85, 0.5);
}

#map-radar-placeholder .leaflet-control-attribution a,
#radar-map-container .leaflet-control-attribution a,
#map-live-container .leaflet-control-attribution a {
  color: #94a3b8 !important;
  text-decoration: none;
}

#map-radar-placeholder .leaflet-control-attribution a:hover,
#radar-map-container .leaflet-control-attribution a:hover,
#map-live-container .leaflet-control-attribution a:hover {
  text-decoration: underline;
}

/* Custom Dark Leaflet Popups and Tooltips */
.leaflet-popup-content-wrapper {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 8px !important;
  line-height: 1.4 !important;
}

.leaflet-popup-tip {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
}

.leaflet-tooltip-dark {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #f8fafc !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
  padding: 4px 8px !important;
}

.leaflet-tooltip-dark:before {
  border-top-color: rgba(15, 23, 42, 0.95) !important;
}



/* Crisp Risk Map Rendering */


/* The risk/observation surfaces are now rasterised server-side at the render
   grid (see src/inference/risk_surface.py RENDER_H/RENDER_W), so the browser no
   longer upscales a 50px-wide PNG. `pixelated` was needed back when it did --
   keeping it would reintroduce the blocky look by snapping the high-resolution
   field to hard pixel edges. Smooth (default) sampling is what gives the
   contour-style boundaries. */
img[src*="api/nowcast/risk-surface"],
img[src*="api/observations/surface"],
img[src*="api/historical/analysis-surface"] {
    image-rendering: auto;
}

/* ===========================================================================
   CHANGE 1 — Google InfoWindow chrome (map risk/location popup)
   ---------------------------------------------------------------------------
   Google wraps every InfoWindow in .gm-style-iw-c, which ships an opaque WHITE
   background, a 12px left gutter, an 8px radius and a drop shadow, plus a 48px
   .gm-style-iw-ch header strip reserved for its close button. StormSense builds
   its own dark popup body inside, so that wrapper appeared as a large white
   frame around the dark card.

   Only the wrapper chrome is neutralised here. The popup's own width, height,
   position, internal padding, typography, colours, close button and content are
   all produced by the popup HTML in app.js and are deliberately untouched:
   the rules below set background/shadow/radius/gutter only, and restore the
   exact 12px the wrapper previously consumed as a transparent inset so the
   rendered box keeps its existing size.
   =========================================================================== */
.gm-style .gm-style-iw-c {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  /* Preserve the wrapper's original 12px left gutter so overall size and the
     content's position are unchanged -- this removes colour, not geometry. */
  padding: 0 0 0 12px !important;
}

/* The pointer/tail below the bubble is drawn as a white wedge. */
.gm-style .gm-style-iw-tc::after,
.gm-style .gm-style-iw-t::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* Inner scroll container: keep it transparent so the popup's own dark card
   provides the background, and stop the stray scrollbar Google forces on. */
.gm-style .gm-style-iw-d {
  background: transparent !important;
  overflow: visible !important;
}

/* Google's reserved header strip is empty for our popups; keeping it would
   leave a blank band above the dark card. The close button is positioned
   independently and is NOT hidden. */
.gm-style .gm-style-iw-ch {
  padding-top: 0 !important;
}

/* Close button stays. Google gives its button a white background of its own,
   which survived the wrapper fix as a small white square in the corner; it is
   made transparent and the glyph tinted for a dark surface. The button itself,
   its size and its hit area are unchanged. */
.gm-style .gm-ui-hover-effect,
.gm-style button.gm-ui-hover-effect {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.gm-style .gm-ui-hover-effect > span {
  background-color: #94a3b8 !important;
}
.gm-style .gm-ui-hover-effect:hover > span {
  background-color: #e2e8f0 !important;
}

/* ===========================================================================
   CHANGE 2 — StormSense compact metric-card system
   ---------------------------------------------------------------------------
   Codifies the card design already used by the "Current observed conditions"
   block (dark navy ground, thin rounded border, compact padding, small
   uppercase mono label, large prominent value, small descriptive subtitle) so
   the same visual language can be applied to the other metric-card groups.

   This is a VISUAL layer only. It sets spacing, borders, type scale and
   neutral colours; it never sets a value's colour to a fixed hazard colour, so
   existing per-status colour coding (emerald/amber/orange/red utility classes
   on the value element) continues to win. No metric name, value, unit,
   description, status indicator or id is changed by this stylesheet.
   =========================================================================== */
.ss-metric-card {
  padding: 0.625rem;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.60);          /* slate-900/60 */
  border: 1px solid rgba(30, 41, 59, 0.60);    /* slate-800/60 */
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ss-metric-card .ss-metric-label,
.ss-metric-label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;                              /* slate-400 */
}

/* Value colour is deliberately NOT set here: hazard cards colour their value
   via existing utility classes, and overriding it would erase status coding. */
.ss-metric-card .ss-metric-value,
.ss-metric-value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 800;
  margin-top: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-metric-card .ss-metric-sub,
.ss-metric-sub {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 500;
  color: #94a3b8;                              /* slate-400 */
}

/* Denser variant for grids that must fit more cards in the same row. */
.ss-metric-card.ss-metric-compact { padding: 0.5rem; }
.ss-metric-card.ss-metric-compact .ss-metric-value { font-size: 1.05rem; }