/**
 * Mastery System CSS
 * TOEIC Vocabulary List - UI v1
 *
 * 習得度マーキングシステムのスタイル
 */

/* ==========================================
   CSS Variables - Colors
   ========================================== */

:root {
  /* 習得度カラースキーム */
  --color-mastery-mastered: #10b981;           /* 緑 - 習得済み */
  --color-mastery-mastered-dark: #059669;      /* 緑(濃) */
  --color-mastery-mastered-bg: #d1fae5;        /* 緑(背景) */

  --color-mastery-learning: #f59e0b;           /* オレンジ - 学習中 */
  --color-mastery-learning-dark: #d97706;      /* オレンジ(濃) */
  --color-mastery-learning-bg: #fef3c7;        /* オレンジ(背景) */

  --color-mastery-not-mastered: #ef4444;       /* 赤 - 未習得 */
  --color-mastery-not-mastered-dark: #dc2626;  /* 赤(濃) */
  --color-mastery-not-mastered-bg: #fee2e2;    /* 赤(背景) */
}

/* ダークモード対応 */
[data-theme="dark"] {
  --color-mastery-mastered-bg: #064e3b;
  --color-mastery-learning-bg: #78350f;
  --color-mastery-not-mastered-bg: #7f1d1d;
}

/* ==========================================
   Mastery Buttons - 単語カードのボタン
   ========================================== */

.mastery-buttons {
  display: flex;
  gap: 6px;
  margin-top: var(--spacing-xs, 8px);
}

.mastery-btn {
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-border, #e5e7eb);
  background-color: var(--color-bg-card, #ffffff);
  color: var(--color-text-secondary, #6b7280);
  border-radius: var(--radius-sm, 6px);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.mastery-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mastery-btn:active {
  transform: translateY(0);
}

/* 各状態のアクティブスタイル */
.mastery-btn[data-status="mastered"].active {
  background-color: var(--color-mastery-mastered);
  border-color: var(--color-mastery-mastered-dark);
  color: white;
}

.mastery-btn[data-status="learning"].active {
  background-color: var(--color-mastery-learning);
  border-color: var(--color-mastery-learning-dark);
  color: white;
}

.mastery-btn[data-status="not-mastered"].active {
  background-color: var(--color-mastery-not-mastered);
  border-color: var(--color-mastery-not-mastered-dark);
  color: white;
}

/* ==========================================
   Word Card Status Indicators
   ========================================== */

/* 単語カードの左ボーダー */
.word-card[data-mastery="mastered"] {
  border-left: 4px solid var(--color-mastery-mastered);
}

.word-card[data-mastery="learning"] {
  border-left: 4px solid var(--color-mastery-learning);
}

.word-card[data-mastery="not-mastered"] {
  border-left: 4px solid var(--color-mastery-not-mastered);
}

/* ==========================================
   Mastery Filter - ヘッダーのフィルター
   ========================================== */

.mastery-filter {
  /* Using card-unified class for base styles */
}

.mastery-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mastery-filter-btn {
  padding: 8px 16px;
  border: 2px solid var(--color-border, #e5e7eb);
  background-color: var(--color-bg-card, #ffffff);
  color: var(--color-text-secondary, #6b7280);
  border-radius: var(--radius-md, 8px);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s) ease;
  white-space: nowrap;
}

.mastery-filter-btn:hover {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
  background-color: var(--color-primary-light, #eff6ff);
}

.mastery-filter-btn.active {
  background-color: var(--color-primary, #3b82f6);
  border-color: var(--color-primary-dark, #2563eb);
  color: white;
}

/* 各フィルターボタンのホバー色 */
.mastery-filter-btn[data-filter="mastered"]:not(.active):hover {
  border-color: var(--color-mastery-mastered);
  color: var(--color-mastery-mastered);
  background-color: var(--color-mastery-mastered-bg);
}

.mastery-filter-btn[data-filter="learning"]:not(.active):hover {
  border-color: var(--color-mastery-learning);
  color: var(--color-mastery-learning);
  background-color: var(--color-mastery-learning-bg);
}

.mastery-filter-btn[data-filter="not-mastered"]:not(.active):hover {
  border-color: var(--color-mastery-not-mastered);
  color: var(--color-mastery-not-mastered);
  background-color: var(--color-mastery-not-mastered-bg);
}

/* ==========================================
   Statistics - 統計カード
   ========================================== */

/* Statistics - Mastery Icon Colors */
.stat-mastery-icon.mastered {
  color: var(--color-mastery-mastered);
}

.stat-mastery-icon.learning {
  color: var(--color-mastery-learning);
}

.stat-mastery-icon.not-mastered {
  color: var(--color-mastery-not-mastered);
}

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 768px) {
  .mastery-filter {
    flex-direction: column;
    align-items: flex-start;
  }

  .mastery-filter-buttons {
    width: 100%;
  }

  .mastery-filter-btn {
    flex: 0 1 auto;
    font-size: 13px;
    padding: 6px 12px;
  }

  .mastery-buttons {
    gap: 4px;
  }

  .mastery-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .mastery-filter-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
}