/* SmartNOTAM.com — NOTAM Briefing + Cards Styles */

/* ── ICAO Input ── */
.icao-input {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: center;
  letter-spacing: .12em;
  color: var(--cyan);
  max-width: 160px;
}

/* ── Severity badges ── */
.sev-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sev-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sev-badge.high { background: var(--notam-high-bg); color: var(--notam-high-text); }
.sev-badge.medium { background: var(--notam-med-bg); color: var(--notam-med-text); }
.sev-badge.low { background: var(--notam-low-bg); color: var(--notam-low-text); }
.sev-badge.cached { background: var(--notam-cached-bg); color: var(--notam-cached-text); }

/* ── Overview box ── */
.notam-overview {
  padding: 12px 14px;
  border: 1px solid rgba(92,159,212,.2);
  border-radius: var(--radius-sm);
  background: rgba(92,159,212,.05);
  margin-bottom: 16px;
}
.notam-overview-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: 6px;
}

/* ── Crew briefing box ── */
.crew-briefing {
  background: rgba(92,159,212,.08);
  border: 1px solid rgba(92,159,212,.25);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.crew-briefing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.crew-briefing-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.crew-briefing-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 6px;
}
.impact-line {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 0;
}

/* ── AI Summary blocks ── */
.ai-summary { font-size: 14px; line-height: 1.6; }
.ai-block { margin-bottom: 2px; }
.ai-block-title {
  font-weight: 800;
  color: var(--cyan);
  font-size: 13px;
}
.ai-block-body {
  white-space: pre-wrap;
  color: var(--txt);
}
.ai-block-ref {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 6px;
  opacity: .6;
}
.ai-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

/* ── NOTAM Cards ── */
.notam-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  transition: opacity .2s;
}
.notam-card-bar { height: 3px; }
.notam-card-body { padding: 10px 12px; }
.notam-card-header { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.notam-card-title { font-size: 12px; font-weight: 700; color: var(--txt); margin-bottom: 3px; }
.notam-card-desc { font-size: 11px; color: var(--muted); line-height: 1.4; word-break: break-word; }
.notam-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.notam-card-date { font-size: 9px; color: var(--muted); font-family: var(--mono); }
.notam-card-id { font-size: 9px; color: var(--muted); font-family: var(--mono); opacity: .6; }
.notam-card-perm {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
}
.notam-card-check {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
  cursor: pointer;
  flex-shrink: 0;
}
.notam-card.reviewed { opacity: .35; }

/* ── View toggle ── */
.view-toggle { display: flex; gap: 8px; }
.view-btn {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.view-btn.active { background: var(--cyan); color: #000; border-color: var(--cyan); }

/* ── Loading ── */
.notam-loading {
  text-align: center;
  padding: 40px 18px;
}
.notam-loading-text {
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}

/* ═══════════════════════════════════════════ */
/* ── Airport Map View ──                     */
/* ═══════════════════════════════════════════ */

/* Map container */
#notamMap {
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  background: #141821;
  border: 1px solid var(--line);
}
@media (max-width: 600px) {
  #notamMap { height: 350px; }
}

/* Tooltip styling */
.map-tooltip {
  background: rgba(10, 14, 23, 0.92) !important;
  color: #e5e5ea !important;
  border: 1px solid rgba(92,159,212,.35) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}
.map-tooltip::before { border-top-color: rgba(10, 14, 23, 0.92) !important; }

/* ICAO label on map */
.map-icao-label {
  background: transparent !important;
  border: none !important;
  text-align: center;
}

/* Legend */
.map-legend {
  background: rgba(10, 14, 23, 0.88);
  border: 1px solid rgba(92,159,212,.25);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: #e5e5ea;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.map-legend-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c9fd4;
  margin-bottom: 4px;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.map-legend-line {
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Bottom navigation bar ── */
.map-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(10, 14, 23, 0.95);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 8px 12px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  color: #e5e5ea;
}
.map-nav-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color: #e5e5ea;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.map-nav-btn:hover {
  background: rgba(92,159,212,.25);
}
.map-nav-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.map-nav-category {
  background: rgba(255,69,58,.15);
  color: #ff453a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.map-nav-separator {
  color: var(--muted);
  font-weight: 400;
}
.map-nav-feature {
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: .04em;
}
.map-nav-count {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}

/* Day theme overrides for map */
.day-theme .map-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1a2e !important;
  border-color: rgba(0,0,0,.15) !important;
}
.day-theme .map-legend {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a2e;
  border-color: rgba(0,0,0,.12);
}
.day-theme .map-nav-bar {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
  border-color: rgba(0,0,0,.1);
}
.day-theme .map-nav-btn {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.1);
  color: #1a1a2e;
}
.day-theme .map-nav-feature { color: #1a1a2e; }

/* Leaflet controls dark mode */
.leaflet-control-zoom a {
  background: rgba(10, 14, 23, 0.85) !important;
  color: #e5e5ea !important;
  border-color: rgba(92,159,212,.2) !important;
}
.leaflet-control-zoom a:hover {
  background: rgba(92,159,212,.3) !important;
}
.day-theme .leaflet-control-zoom a {
  background: rgba(255,255,255,.9) !important;
  color: #1a1a2e !important;
  border-color: rgba(0,0,0,.15) !important;
}
.leaflet-control-attribution {
  background: rgba(10, 14, 23, 0.7) !important;
  color: #8e8e93 !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: #5c9fd4 !important; }
.day-theme .leaflet-control-attribution {
  background: rgba(255,255,255,.7) !important;
  color: #666 !important;
}