/* =========================================
   カード共通スタイル
   掲示板・ナレッジ・議事録で使用
========================================= */

/* ==========================================
   カードグリッドレイアウト（レスポンシブ）
========================================== */

/* モバイル: 1列（デフォルト） */
.cards-grid {
  display: block;
}

.card {
  margin-bottom: var(--space-md);
}

/* タブレット・小PC: 2列 (768px〜) */
@media (min-width: 768px) {
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .card {
    margin-bottom: 0;
  }
}

/* 大画面PC: 3列 (1400px〜) */
@media (min-width: 1400px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* ==========================================
   カード本体
========================================== */

.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .card {
  border-color: var(--color-bg-primary);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

/* ==========================================
   カードヘッダー
========================================== */

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* カテゴリバッジ */
.card-category {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ==========================================
   カテゴリバッジ（7局＋その他）
========================================== */

/* ==========================================
   カテゴリバッジ（7局＋その他）
========================================== */

/* ライトモード */
.category-経営管理局 {
  background: #bfe3d0;
  color: #1a1a1a;
}

.category-編成業務局 {
  background: #a9d6e5;
  color: #1a1a1a;
}

.category-総合ビジネス局 {
  background: #bbd0ff;
  color: #1a1a1a;
}

.category-東京支社 {
  background: #d5c6e0;
  color: #1a1a1a;
}

.category-大阪支社 {
  background: #f7c6d9;
  color: #1a1a1a;
}

.category-報道制作局 {
  background: #f4b6a6;
  color: #1a1a1a;
}

.category-技術局 {
  background: #f6eac2;
  color: #1a1a1a;
}

.category-その他 {
  background: #ddeedc;
  color: #1a1a1a;
}

/* ダークモード */
[data-theme="dark"] .category-経営管理局 {
  background: #8fd3b6;
  color: #1a1a1a;
}

[data-theme="dark"] .category-編成業務局 {
  background: #7fc3d9;
  color: #1a1a1a;
}

[data-theme="dark"] .category-総合ビジネス局 {
  background: #8faeff;
  color: #1a1a1a;
}

[data-theme="dark"] .category-東京支社 {
  background: #b9a6d6;
  color: #1a1a1a;
}

[data-theme="dark"] .category-大阪支社 {
  background: #f29bbf;
  color: #1a1a1a;
}

[data-theme="dark"] .category-報道制作局 {
  background: #e88973;
  color: #1a1a1a;
}

[data-theme="dark"] .category-技術局 {
  background: #e6d98c;
  color: #1a1a1a;
}

[data-theme="dark"] .category-その他 {
  background: #a9cfa8;
  color: #1a1a1a;
}

/* ==========================================
   カテゴリバッジ（掲示板）
========================================== */

/* ライトモード */
/* .category-badge にも適用 */
.category-badge.category-お知らせ,
.category-お知らせ {
  background: #a8d8d8;
  color: #1a1a1a;
}

.category-badge.category-イベント,
.category-イベント {
  background: #afcbff;
  color: #1a1a1a;
}

.category-badge.category-質問・相談,
.category-質問・相談 {
  background: #d6c6f5;
  color: #1a1a1a;
}

.category-badge.category-その他,
.category-その他 {
  background: #f3e8a6;
  color: #1a1a1a;
}

/* ダークモード */
[data-theme="dark"] .category-badge.category-お知らせ,
[data-theme="dark"] .category-お知らせ {
  background: #7fc4c4;
  color: #1a1a1a;
}

[data-theme="dark"] .category-badge.category-イベント,
[data-theme="dark"] .category-イベント {
  background: #7fa8f8;
  color: #1a1a1a;
}

[data-theme="dark"] .category-badge.category-質問・相談,
[data-theme="dark"] .category-質問・相談 {
  background: #b8a6e8;
  color: #1a1a1a;
}

[data-theme="dark"] .category-badge.category-その他,
[data-theme="dark"] .category-その他 {
  background: #e6d36a;
  color: #1a1a1a;
}

/* 日付 */
.card-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
  margin-left: auto;
}

/* ==========================================
   カードコンテンツ
========================================== */

/* タイトル */
.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 本文 */
.card-description,
.card-content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ==========================================
   タグ
========================================== */

.card-tags,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-sm) 0;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.5;
}

/* ==========================================
   カードフッター
========================================== */

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  margin-top: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

/* 作成者情報 */
.card-author {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* コメント数 */
.card-comments {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 閲覧数 */
.card-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 参加者情報（議事録） */
.card-attendees {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================
   ステータスバッジ（カード内）
========================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-left: auto;
}

.status-badge--draft {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

/* 承認済み */
.status-badge.status-approved {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* 承認待ち */
.status-badge.status-pending {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

/* ==========================================
   カテゴリバッジ（ステータス系）
========================================== */

.category-draft {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: none;
}

.category-published {
  background: transparent !important;
  color: var(--color-success) !important;
  border: none !important;
}

[data-theme="dark"] .category-published {
  background: transparent !important;
  color: #6ee7b7 !important;
  border: none !important;
}

/* ==========================================
   レスポンシブ対応（モバイル）
========================================== */

@media (max-width: 768px) {
  .card {
    padding: var(--space-md);
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-date {
    margin-left: 0;
    text-align: left;
  }

  .card-title {
    font-size: var(--font-size-md);
  }

  .card-tags,
  .tag-list {
    margin: var(--space-xs) 0;
    gap: 4px;
  }

  .tag {
    padding: 3px 10px;
  }

  .card-footer {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}

/* ==========================================
   状態表示（ローディング・エラー・空）共通
========================================== */
.loading-state,
.error-state,
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto var(--space-lg);
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.loading-state p,
.error-state p,
.empty-state p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-lg);
}

.empty-icon,
.error-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.error-state h3,
.empty-state h3 {
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-2xl);
}

/* ==========================================
   カードステータスバッジ
========================================== */
.card-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}