/* ==========================================================================
   style_hotspots.css (Vending Hot Spots 2.0 最新仕様)
   ========================================================================== */

/* 1. 外側全体のレイアウト・コンテナ */
.hotspots-sidebar-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--sidebar-bg);
  border-radius: 12px;
  border: 1px solid #333;
  padding: 20px;
}

/* 2. ヘッダー部分 */
.hotspots-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #333;
  padding-bottom: 15px;
}

.hotspots-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent-main);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px 0;
}

.hotspots-header h3 i {
  color: #ff4b2b; /* 火柱アイコンはエネルギッシュな赤オレンジに */
  text-shadow: 0 0 8px rgba(255, 75, 43, 0.6);
}

.hotspots-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* 3. リストスクロールエリア */
.hotspots-list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}

/* スクロールバーのカスタマイズ（既存の美しい緑バーを維持） */
.hotspots-list-scroll::-webkit-scrollbar {
  width: 6px;
}

.hotspots-list-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-main);
  border-radius: 10px;
}

/* 4. スポットアイテムカード（2.0 デザイン） */
.hotspot-item-card {
  background: var(--card-bg);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* カードホバー時のネオンエフェクト */
.hotspot-item-card:hover {
  background: rgba(37, 40, 44, 0.8);
  border-color: var(--accent-blue);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 209, 255, 0.15);
}

/* 5. 順位バッジ */
.hotspot-rank-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #444;
  color: var(--text-main);
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 1位〜3位までの上位はアクセントメイン色で少し目立たせる */
.hotspot-item-card:nth-child(1) .hotspot-rank-badge,
.hotspot-item-card:nth-child(2) .hotspot-rank-badge,
.hotspot-item-card:nth-child(3) .hotspot-rank-badge {
  border-color: var(--accent-main);
  color: var(--accent-main);
  text-shadow: 0 0 6px rgba(0, 250, 172, 0.4);
}

/* 6. スポット情報エリア */
.hotspot-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* 文字溢れ(ellipsis)対策 */
}

.hotspot-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotspot-metrics {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.hotspot-metrics span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hotspot-metrics i {
  color: var(--accent-blue);
}

/* 7. スコア表示ボックス（ネオン発光） */
.hotspot-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 52px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #444;
  flex-shrink: 0;
}

.score-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.1;
}

.score-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* スコアの閾値に応じた色の動的変化 (badgeClassに対応) */
.hotspot-score-box.badge-high .score-num {
  color: var(--accent-main);
  text-shadow: 0 0 8px rgba(0, 250, 172, 0.6);
}
.hotspot-score-box.badge-high {
  border-color: rgba(0, 250, 172, 0.4);
}

.hotspot-score-box.badge-mid .score-num {
  color: var(--accent-blue);
  text-shadow: 0 0 8px rgba(0, 209, 255, 0.6);
}
.hotspot-score-box.badge-mid {
  border-color: rgba(0, 209, 255, 0.4);
}

.hotspot-score-box.badge-low .score-num {
  color: #ff9f43;
  text-shadow: 0 0 8px rgba(255, 159, 67, 0.4);
}
.hotspot-score-box.badge-low {
  border-color: rgba(255, 159, 67, 0.3);
}

/* 8. ローディング・空状態 */
.hotspots-loading,
.hotspots-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.hotspots-loading i {
  color: var(--accent-main);
}