/**
 * Airport Detail Panel
 * Desktop: Left-side card overlaying the map (inside .map-container)
 * Mobile: Bottom sheet, swipeable
 */

/* === Base Panel === */
.detail-panel {
  position: absolute;
  z-index: 900;
  background: var(--surface-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 250ms var(--ease-out);
}

/* Desktop: panel flush against sidebar right edge, full height */
@media (min-width: 640px) {
  .detail-panel {
    top: 0;
    left: var(--sidebar-width);
    bottom: 0;
    width: 340px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    transform: translateX(calc(-100% - 24px));
    transition: transform 250ms var(--ease-out), left 300ms var(--ease-out);
  }
  .detail-panel.open {
    transform: translateX(0);
  }
}

/* Mobile: bottom sheet */
@media (max-width: 639px) {
  .detail-panel {
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    min-height: 200px;
    max-height: 80vh;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
    transform: translateY(100%);
  }
  .detail-panel.open {
    transform: translateY(0);
  }
  .detail-panel.maximized {
    height: calc(100% - 4px);
    max-height: none;
  }
}

/* === Header Bar === */
.detail-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}


.detail-panel__drag-handle {
  display: none;
}
@media (max-width: 639px) {
  .detail-panel__drag-handle {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
  }
  .detail-panel__drag-handle span {
    width: 36px;
    height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    display: block;
  }
  .detail-panel__header {
    padding-top: 18px;
  }
}


#detail-header-content {
  flex: 1;
  min-width: 0;
}

.detail-header__id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-header__id {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--horizon-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.detail-header__id:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail-header__ext-icon {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: opacity 150ms;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.detail-header__id:hover .detail-header__ext-icon {
  opacity: 1;
}

.detail-header__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 1px 0 0;
  line-height: 1.35;
  padding-right: var(--space-8);
}

.detail-header__info {
  font-size: 0.6875rem;
  color: var(--gray-500);
}

.detail-header__badges { display: none; }

.detail-panel__maximize {
  display: none;
}
@media (max-width: 639px) {
  .detail-panel__maximize {
    display: flex;
    position: absolute;
    top: 14px;
    right: 44px;
    z-index: 1;
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 1rem;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
  .detail-panel__maximize:hover { background: var(--gray-100); }

  .maximize-chevron {
    transition: transform 200ms var(--ease-out);
  }
  .detail-panel.maximized .maximize-chevron {
    transform: rotate(180deg);
  }
}

.detail-panel__close {
  position: absolute;
  top: var(--space-2);
  right: 0;
  z-index: 1;
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.detail-panel__close:hover { background: var(--gray-100); color: var(--gray-700); }
@media (max-width: 639px) {
  .detail-panel__close {
    top: 14px;
    right: var(--space-2);
  }
}

/* === At-a-glance Summary === */
.detail-glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
  background: var(--surface-bg);
}

.detail-glance__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  border-right: 1px solid var(--gray-100);
}
.detail-glance__item:last-child { border-right: none; }

.detail-glance__value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
  line-height: 1.2;
  white-space: nowrap;
}
.detail-glance__value--wind {
  font-size: 0.8125rem;
}
.detail-glance__value--rwy {
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.detail-glance__label {
  font-size: 0.5rem;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
  font-weight: 500;
}

.detail-glance__item:last-child {
  justify-content: center;
}

/* === Scrollable Body === */
.detail-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.detail-section {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
}

.detail-section__title {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-section__title--toggle {
  cursor: pointer;
  user-select: none;
}

.detail-section__title--toggle:hover {
  color: var(--gray-600);
}

.runway-section__chevron {
  margin-left: auto;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 250ms var(--ease-out), color 150ms var(--ease-out);
}

.detail-section__title--toggle:hover .runway-section__chevron {
  color: var(--gray-600);
}

.detail-section__title--toggle.expanded .runway-section__chevron {
  transform: rotate(180deg);
}

.runway-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms var(--ease-out);
}

.runway-collapsible.expanded {
  max-height: 800px;
}

.btn--compact {
  min-height: unset;
  padding: var(--space-1) var(--space-3);
  font-size: 0.6875rem;
  border-radius: var(--radius-sm);
}

/* === No Runway Data === */
.no-runway-data {
  padding: var(--space-4);
  color: var(--gray-500);
  text-align: center;
}

.no-runway-data__msg {
  margin: 0 0 var(--space-2);
}

.no-runway-data__caption {
  margin: 0;
}

/* === Runway Diagram === */
.runway-diagram-container {
  background: var(--surface-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2) var(--space-5);
  position: relative;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.runway-diagram-container svg {
  height: auto;
  max-width: 100%;
}

.runway-closed-badge {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 0.5rem;
  padding: 2px 6px;
}

.runway-diagram-info {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 0.625rem;
  color: var(--gray-500);
  line-height: 1.3;
  text-align: right;
}


/* === Runway + Wind 2-Column Grid === */
.detail-rwy-wind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.rwy-wind-grid__runway {
  padding-right: var(--space-3);
  border-right: 1px solid var(--gray-100);
}

.rwy-wind-grid__wind {
  padding-left: var(--space-3);
}

@media (max-width: 639px) {
  .detail-rwy-wind-grid {
    grid-template-columns: 1fr;
  }
  .rwy-wind-grid__runway {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .rwy-wind-grid__wind {
    padding-left: 0;
  }
}

/* === Crosswind Rows === */
.crosswind-group + .crosswind-group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gray-100);
}

.crosswind-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.crosswind-row__runway {
  font-family: var(--font-primary);
  font-weight: 600;
  padding-right: var(--space-2);
  border-right: 1px solid var(--gray-300);
  margin-right: var(--space-1);
  white-space: nowrap;
  flex-shrink: 0;
}

.crosswind-row__value {
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.crosswind-row__gust {
  font-size: 0.6875rem;
  color: var(--gray-700);
  margin-left: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.crosswind-row__badge {
  margin-left: calc(-1 * var(--space-1));
  flex-shrink: 0;
}

.crosswind-row .badge,
.crosswind-row__badge .badge {
  padding: 1px 6px;
  font-size: 0.625rem;
  line-height: 1.3;
}

/* === Windsock Section === */
/* Layout for .windsock-section and .windsock-data is in windsock.css */

.windsock-data__wind {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  line-height: 1.2;
  white-space: nowrap;
}

.windsock-data__gust {
  color: var(--marginal-amber);
  font-size: 0.6875rem;
}
.windsock-data__source {
  margin-top: var(--space-2);
}

/* === Conditions Grid === */
.conditions-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  font-size: 0.8125rem;
}
.conditions-grid dt { color: var(--gray-500); font-weight: 600; font-size: 0.75rem; }
.conditions-grid dd { color: var(--gray-900); }

/* === Raw Data Toggles (METAR + TAF) === */
.raw-data-toggle {
  background: none;
  border: none;
  color: var(--horizon-teal);
  font-size: 0.6875rem;
  cursor: pointer;
  padding: 2px 0;
}
.raw-data-toggle:hover { text-decoration: underline; }

.raw-data-content {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms var(--ease-out), padding 200ms var(--ease-out);
  word-break: break-word;
}
.raw-data-content.expanded { max-height: 400px; padding: var(--space-1) var(--space-2); overflow-y: auto; }

/* === Forecast Timeline === */
.forecast-timeline {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.time-block {
  min-width: 60px;
  height: 50px;
  background: var(--surface-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.5625rem;
  color: var(--gray-700);
  transition: all 100ms;
  flex-shrink: 0;
}
.time-block:hover { background: var(--gray-50); }
.time-block.selected {
  background: #EFF6FF;
  border-color: var(--horizon-teal);
  font-weight: 600;
}
.time-block__label { font-weight: 600; font-size: 0.625rem; }
.time-block__wind { font-size: 0.5625rem; color: var(--gray-700); }
.time-block__xw { font-size: 0.5625rem; font-weight: 600; }
.time-block__fc { line-height: 1; }

/* TAF cards are slightly larger to indicate primary source */
.forecast-timeline--taf .time-block {
  min-width: 66px;
  height: 54px;
}

/* Merged timeline — larger blocks for readability */
.forecast-timeline--merged .time-block {
  min-width: 76px;
  height: 72px;
}
.forecast-timeline--merged .time-block__label { font-size: 0.6875rem; }
.forecast-timeline--merged .time-block__wind  { font-size: 0.625rem; }
.forecast-timeline--merged .time-block__xw    { font-size: 0.625rem; }

/* Invisible scroll-target day markers (no visual label — "DOW HHZ" on each block is enough) */
.timeline-day-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 2px;
}

/* Single source-summary line above the merged timeline */
.forecast-meta {
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

/* === Forecast Source Labels === */
.forecast-source-label {
  margin: var(--space-2) 0 var(--space-1);
}
.forecast-source-label:first-child {
  margin-top: 0;
}

/* === Current/METAR Reset Block === */
.forecast-current-row {
  display: flex;
  margin-bottom: var(--space-2);
}

.forecast-current-metar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--source-metar);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 5px 13px 5px 9px;
  cursor: pointer;
  transition: background 150ms;
}
.forecast-current-metar-btn:hover { background: #1D4ED8; }
.forecast-current-metar-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.metar-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  animation: metar-pulse 2s infinite;
}
@keyframes metar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70%  { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* === Warning Banners === */
.weather-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  background: var(--marginal-amber-light);
  border: 1px solid rgba(180,83,9,0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: 0.6875rem;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}
.weather-warning__icon { flex-shrink: 0; }

.weather-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  background: #EFF6FF;
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: 0.6875rem;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}


/* === Skeleton === */
.detail-skeleton .skeleton { margin-bottom: var(--space-2); }

/* Header skeleton pieces */
.skeleton--id   { width: 80px; height: 18px; }
.skeleton--name { width: 70%; margin-top: 8px; }
.skeleton--sub  { width: 50%; margin-top: 4px; }

/* Body skeleton pieces */
.skeleton--map  { height: 180px; border-radius: 12px; }
.skeleton--wind-row { display: flex; gap: 16px; align-items: center; }
.skeleton--wind-row .skeleton--circle { flex-shrink: 0; }
.skeleton--wind-info { flex: 1; }
.skeleton--forecast-row { display: flex; gap: 4px; }
.skeleton--forecast-card { width: 80px; height: 72px; border-radius: 8px; flex-shrink: 0; }

/* === Dark theme — slate-navy === */
.detail-panel {
  --surface-bg:           #131F2E;
  --surface-card:         #1B2C40;
  --gray-50:              rgba(255,255,255,0.03);
  --gray-100:             rgba(255,255,255,0.07);
  --gray-200:             rgba(255,255,255,0.09);
  --gray-300:             rgba(150,199,232,0.2);
  --gray-500:             rgba(150,199,232,0.6);
  --gray-700:             rgba(200,220,235,0.75);
  --gray-900:             #E8F0F8;
  --qualify-green:        #45f0d0;
  --qualify-green-light:  rgba(69,240,208,0.1);
  --marginal-amber:       #F59E0B;
  --marginal-amber-light: rgba(245,158,11,0.12);
  --exceed-red:           #EF4444;
  --exceed-red-light:     rgba(239,68,68,0.12);
  --vrb-purple:           #A78BFA;
  --stale-yellow:         #FBBF24;
  --closed-gray:          #94A3B8;
  border-color: rgba(255,255,255,0.09);
  /* Re-establish text color inheritance root for the dark panel */
  color: var(--gray-900);
}

/* Hardcoded badge backgrounds not using CSS variables */
.detail-panel .source-badge--metar { background: rgba(37,99,235,0.18);  color: #93C5FD; }
.detail-panel .source-badge--taf   { background: rgba(124,58,237,0.18); color: #C4B5FD; }
.detail-panel .source-badge--taf-nearby { background: rgba(124,58,237,0.18); color: #C4B5FD; }
.detail-panel .source-badge--nws   { background: rgba(234,88,12,0.18);  color: #FCA47A; }
.detail-panel .source-badge--openmeteo { background: rgba(234,88,12,0.18); color: #FCA47A; }
.detail-panel .source-badge--stale { background: rgba(245,158,11,0.18); color: #FBBF24; }
.detail-panel .badge--vrb          { background: rgba(124,58,237,0.18); color: #C4B5FD; }

/* Hardcoded colors in time blocks and info banners */
.detail-panel .time-block.selected {
  background: rgba(0,147,215,0.18);
}
.detail-panel .weather-info {
  background: rgba(37,99,235,0.1);
  border-color: rgba(37,99,235,0.2);
}
.detail-panel .metar-pulse-dot {
  background: rgba(150,199,232,0.85);
}
@keyframes metar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(150,199,232,0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(150,199,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(150,199,232,0); }
}