/* ═══════════════════════════════════════════
   news.css  ニュースページ
   ═══════════════════════════════════════════ */

/* ─────────────────────────────────────────
   レイアウト
   ───────────────────────────────────────── */
.news-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
}

.scroll-wrapper .news-main {
  padding-top: 0;
}

/* ─────────────────────────────────────────
   アクションバー
   ───────────────────────────────────────── */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0 var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}

.action-bar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text-primary);
}

/* ─────────────────────────────────────────
   更新ボタン
   ───────────────────────────────────────── */
.btn-refresh {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--btn-padding-md);
  height: var(--btn-height-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.btn-refresh:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.refresh-icon {
  font-size: var(--font-size-md);
  display: inline-block;
}

.btn-refresh.spinning .refresh-icon {
  animation: news-spin 0.7s linear infinite;
}

@keyframes news-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────
   取得日時・件数
   ───────────────────────────────────────── */
.news-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

/* ─────────────────────────────────────────
   フィルターボタン
   ───────────────────────────────────────── */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.news-filter .filter-btn {
  padding: var(--btn-padding-sm);
  height: var(--btn-height-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  white-space: nowrap;
}

.news-filter .filter-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.news-filter .filter-btn.active {
  background: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}

/* ─────────────────────────────────────────
   ローディング
   ───────────────────────────────────────── */
.news-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.news-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: news-spin 0.8s linear infinite;
}

/* ─────────────────────────────────────────
   エラー・空状態
   ───────────────────────────────────────── */
.news-error,
.news-empty {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.news-error {
  color: var(--color-error);
}

/* ─────────────────────────────────────────
   ニュースリスト・カード
   ───────────────────────────────────────── */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  transition:
    background var(--transition-fast),
    padding-left var(--transition-fast);
}

.news-card:hover {
  background: var(--color-bg-hover);
  padding-left: var(--space-sm);
}

/* ─────────────────────────────────────────
   カードヘッダー（ソースバッジ + 日付）
   ───────────────────────────────────────── */
.news-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.news-card__source {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  /* デフォルト（未定義ソース用） */
  background: var(--color-primary-light);
  color: #1a1a1a;
}

.news-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ─────────────────────────────────────────
   ソース別バッジ色（ライトモード）
   ───────────────────────────────────────── */

.news-card__source[data-source="新潟テレビ21"] {
  background: #f7c6d9;
  color: #1a1a1a;
}
.news-card__source[data-source="テレビ新潟"] {
  background: #a9d6e5;
  color: #1a1a1a;
}
.news-card__source[data-source="新潟放送"] {
  background: #bfe3d0;
  color: #1a1a1a;
}
.news-card__source[data-source="新潟日報"] {
  background: #d5c6e0;
  color: #1a1a1a;
}
.news-card__source[data-source="新潟総合テレビ"] {
  background: #f6eac2;
  color: #1a1a1a;
}
.news-card__source[data-source="Google News 新潟県"] {
  background: #c7d3e3;
  color: #1a1a1a;
}
.news-card__source[data-source="Google News 中越上越"] {
  background: #ddeedc;
  color: #1a1a1a;
}
.news-card__source[data-source="Google News 下越佐渡"] {
  background: #eadfd3;
  color: #1a1a1a;
}
.news-card__source[data-source="Google News その他市町村"] {
  background: #f4b6a6;
  color: #1a1a1a;
}

/* ─────────────────────────────────────────
   ソース別バッジ色（ダークモード）
   ───────────────────────────────────────── */

[data-theme="dark"] .news-card__source[data-source="新潟テレビ21"] {
  background: #f29bbf;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="テレビ新潟"] {
  background: #7fc3d9;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="新潟放送"] {
  background: #8fd3b6;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="新潟日報"] {
  background: #b9a6d6;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="新潟総合テレビ"] {
  background: #e6d98c;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="Google News 新潟県"] {
  background: #9fb3c8;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="Google News 中越上越"] {
  background: #a9cfa8;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="Google News 下越佐渡"] {
  background: #cbbbaa;
  color: #1a1a1a;
}
[data-theme="dark"] .news-card__source[data-source="Google News その他市町村"] {
  background: #e88973;
  color: #1a1a1a;
}

/* Google News 中越上越：⑨ セージ */
[data-theme="dark"] .news-card__source[data-source="Google News 中越上越"] {
  background: #152515;
  color: #a9cfa8;
}

/* Google News 下越佐渡：⑩ サンドベージュ */
[data-theme="dark"] .news-card__source[data-source="Google News 下越佐渡"] {
  background: #251e18;
  color: #cbbbaa;
}

/* Google News その他市町村：⑦ コーラル */
[data-theme="dark"] .news-card__source[data-source="Google News その他市町村"] {
  background: #2d100a;
  color: #e88973;
}

/* ─────────────────────────────────────────
   タイトル
   ───────────────────────────────────────── */
.news-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.6;
  word-break: break-all;
  margin: 0;
}

.news-card:hover .news-card__title {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ─────────────────────────────────────────
   URL 表示
   ───────────────────────────────────────── */
.news-card__url {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card:hover .news-card__url {
  text-decoration: underline;
}

/* ─────────────────────────────────────────
   スマホ
   ───────────────────────────────────────── */
@media (max-width: 767px) {
  .news-main {
    padding: 0 var(--space-sm) var(--space-xl);
  }

  .scroll-wrapper .news-main {
    padding-top: var(--space-sm);
  }

  .action-bar__title {
    font-size: var(--font-size-md);
  }

  .news-card__title {
    font-size: var(--font-size-xs);
  }

  .refresh-label {
    display: none;
  }
}