/* First Responder Fire Weather Panel */
.fr-panel { 
  display:flex; 
  flex-direction:column; 
  gap:8px;
  padding:2px 0;
}

.fr-heading { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:6px 8px 4px;
  background:linear-gradient(180deg, rgba(15,23,42,0.6) 0%, rgba(30,41,59,0.3) 100%);
  border-bottom:1px solid rgba(71,85,105,0.3);
}

.fr-title-wrap { 
  display:flex; 
  align-items:center; 
  gap:8px; 
  font-size:13.5px; 
  font-weight:700; 
  letter-spacing:.5px; 
  color:#f1f5f9;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.fr-icon { 
  font-size:16px; 
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.fr-count-badge { 
  background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border:1px solid #334155; 
  padding:3px 8px; 
  border-radius:7px; 
  font-size:11px; 
  font-weight:700; 
  color:#38bdf8;
  box-shadow:0 2px 4px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
  font-family:ui-monospace, monospace;
}

.fr-meta { 
  font-size:10px; 
  color:#64748b; 
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:0.2px;
}

.fr-filter-bar { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  background:linear-gradient(135deg, rgba(15,23,42,0.75) 0%, rgba(30,41,59,0.6) 100%);
  border:1px solid rgba(71,85,105,0.4); 
  padding:6px 8px; 
  border-radius:10px; 
  gap:10px;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.fr-filters-left, .fr-filters-right { 
  display:flex; 
  align-items:center; 
  gap:5px; 
  flex-wrap:wrap; 
}

.fr-filter { 
  background:linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border:1px solid rgba(71,85,105,0.6); 
  color:#cbd5e1; 
  font-size:10.5px; 
  padding:5px 10px; 
  border-radius:7px; 
  cursor:pointer; 
  letter-spacing:.5px; 
  font-weight:600;
  transition:all 0.2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.fr-filter.active { 
  background:linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color:#fff; 
  border-color:#0ea5e9;
  box-shadow:0 0 0 2px rgba(14,165,233,0.2), 0 2px 4px rgba(0,0,0,0.3);
}

.fr-filter:hover { 
  background:linear-gradient(135deg, #334155 0%, #475569 100%);
  border-color:#64748b;
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
}

.fr-toggle { 
  display:flex; 
  align-items:center; 
  gap:5px; 
  font-size:10.5px; 
  color:#94a3b8; 
  background:rgba(30,41,59,0.8);
  padding:4px 8px 4px 6px; 
  border:1px solid rgba(71,85,105,0.5); 
  border-radius:7px;
  cursor:pointer;
  transition:all 0.2s ease;
  font-weight:500;
}

.fr-toggle:hover {
  background:rgba(51,65,85,0.9);
  border-color:rgba(100,116,139,0.6);
}

.fr-toggle input { 
  margin:0; 
  accent-color:#06b6d4;
  cursor:pointer;
}

.fr-footer { 
  text-align:center; 
  font-size:10px; 
  color:#64748b; 
  margin-top:6px; 
  padding:6px 0 4px; 
  border-top:1px solid rgba(71,85,105,0.25);
  background:linear-gradient(180deg, transparent 0%, rgba(15,23,42,0.3) 100%);
  font-family:ui-monospace, monospace;
  letter-spacing:0.3px;
}

/* Fire weather rows */
.fw-row { 
  display:flex; 
  align-items:center; 
  gap:7px; 
  background:linear-gradient(135deg, rgba(23,32,48,0.75) 0%, rgba(30,41,59,0.65) 100%);
  border:1px solid rgba(71,85,105,.45); 
  border-left:3px solid rgba(56,189,248,0.5);
  border-radius:8px; 
  padding:7px 10px; 
  cursor:pointer; 
  line-height:1.2; 
  backdrop-filter:blur(8px) saturate(150%);
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fw-row:hover { 
  background:linear-gradient(135deg, rgba(40,56,78,0.85) 0%, rgba(51,65,85,0.75) 100%);
  border-color:rgba(100,116,139,.65);
  border-left-color:#38bdf8;
  transform:translateX(2px);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.fw-row.fw-error { 
  background:linear-gradient(135deg, rgba(127,29,29,.45) 0%, rgba(153,27,27,.35) 100%);
  border-color:#7f1d1d; 
  border-left-color:#dc2626;
  color:#fecaca; 
}

.fw-row.fw-missing { 
  background:rgba(30,41,59,0.4); 
  border-style:dashed; 
  border-left-color:rgba(148,163,184,0.5);
  color:#94a3b8; 
  opacity:0.8;
}

.fw-id { 
  font-weight:700; 
  font-size:10.5px; 
  letter-spacing:.6px; 
  color:#38bdf8; 
  min-width:58px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fw-metric { 
  font-size:10.5px; 
  padding:3px 7px; 
  border-radius:6px; 
  background:rgba(15,23,42,0.7); 
  border:1px solid rgba(71,85,105,.6); 
  color:#e2e8f0; 
  min-width:48px; 
  text-align:center; 
  font-weight:600;
  letter-spacing:0.3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
}

.fw-metric.extreme { 
  background:linear-gradient(135deg, rgba(239,68,68,0.28) 0%, rgba(220,38,38,0.22) 100%);
  border-color:#dc2626; 
  color:#fecaca;
  box-shadow:0 0 0 1px rgba(220,38,38,0.3), inset 0 1px 2px rgba(0,0,0,0.3);
}

.fw-metric.high { 
  background:linear-gradient(135deg, rgba(245,158,11,0.26) 0%, rgba(251,146,60,0.20) 100%);
  border-color:#f59e0b; 
  color:#ffedd5;
  box-shadow:0 0 0 1px rgba(245,158,11,0.25), inset 0 1px 2px rgba(0,0,0,0.2);
}

.fw-metric.moderate { 
  background:linear-gradient(135deg, rgba(14,165,233,0.22) 0%, rgba(56,189,248,0.16) 100%);
  border-color:#0ea5e9; 
  color:#bae6fd;
}

.fw-metric.normal { 
  background:linear-gradient(135deg, rgba(34,197,94,0.22) 0%, rgba(22,163,74,0.16) 100%);
  border-color:#16a34a; 
  color:#dcfce7;
}

.fw-msg { 
  font-size:10px; 
  opacity:.7; 
  font-style:italic; 
  color:#94a3b8; 
}

/* Priority coloring overlays */
.fw-row.priority-high { 
  box-shadow:0 0 0 1px #dc2626, 0 0 0 4px rgba(220,38,38,0.2), 0 4px 12px rgba(220,38,38,0.25);
  border-left-color:#dc2626 !important;
}

.fw-row.priority-elevated { 
  box-shadow:0 0 0 1px #f59e0b, 0 0 0 3px rgba(245,158,11,0.15);
  border-left-color:#f59e0b !important;
}

/* Weather metrics */
.weather-timestamp {
  text-align: right;
  padding: 8px 16px;
  font-size: 11px;
  color: #64748b;
  background: rgba(30, 41, 59, 0.7);
  border-top: 1px solid rgba(239, 68, 68, 0.15);
}

.weather-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
}

.weather-metric {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
}

.weather-metric.critical {
  border-color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.weather-metric.warning {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.weather-metric.good {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.metric-label {
  color: #94a3b8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.metric-value {
  color: #e5e7eb;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-value.critical { color: #ef4444; }
.metric-value.warning { color: #f59e0b; }
.metric-value.good { color: #10b981; }

.wind-direction {
  display: inline-block;
  transform: rotate(var(--wind-angle, 0deg));
  transition: transform 0.3s ease;
}

.fire-weather-index {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #475569;
  border-radius: 6px;
  margin-top: 4px;
}

.fwi-label {
  color: #94a3b8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fwi-value {
  font-weight: 700;
  font-size: 14px;
}

.fwi-class {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.fwi-low { background: #10b981; color: #fff; }
.fwi-moderate { background: #f59e0b; color: #fff; }
.fwi-high { background: #ef4444; color: #fff; }
.fwi-very-high { background: #dc2626; color: #fff; }
.fwi-extreme { background: #7c2d12; color: #fff; animation: pulse-extreme 2s infinite; }
.fwi-pending { background: #2563eb; color: #fff; animation: pulse-pending 2s infinite; }
.fwi-unavailable { background: #475569; color: #fff; }

@keyframes pulse-extreme {
  0% { background-color: #7f1d1d; }
  50% { background-color: #dc2626; }
  100% { background-color: #7f1d1d; }
}

@keyframes pulse-pending {
  0% { background-color: #2563eb; }
  50% { background-color: #3b82f6; }
  100% { background-color: #2563eb; }
}

.weather-timestamp {
  text-align: center;
  font-size: 10px;
  color: #64748b;
  padding: 6px;
  border-top: 1px solid #334155;
}

.wind-info.high-wind { 
  color: #ef4444;
  border-color: #dc2626;
  background: rgba(239, 68, 68, 0.15);
}

.wind-info.moderate-wind { 
  color: #f59e0b;
  border-color: #d97706;
  background: rgba(245, 158, 11, 0.15);
}

.wind-info.normal-wind { 
  color: #22c55e;
  border-color: #16a34a;
  background: rgba(34, 197, 94, 0.15);
}

.wind-icon {
  margin-right: 4px;
}

.wind-speed {
  font-size: 13px;
}