/* ========================================
   ICT教育支援アプリ - テーマCSS
   themes.css (v2.1 - 完全版・ダークモード文字色修正対応)
   テーマ・ダークモード・章別カラー・特殊色設定
======================================== */

/* ========================================
   🌙 ダークモードテーマ適用
======================================== */

/* 基本要素のテーマ適用 */
[data-theme="dark"] body {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* ヘッダー */
[data-theme="dark"] .app-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}

/* メインコンテンツ */
[data-theme="dark"] .main-content {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 0 20px var(--shadow-light);
}

/* セクションブロック */
[data-theme="dark"] .section-block {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .section-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .section-content {
  color: var(--color-text-primary);
}

/* ========================================
   🎨 章別テーマシステム
======================================== */

/* 第1章 - 緑系 */
.chapter-1 .chapter-header,
.chapter-header.chapter-1,
.chapter-1 .chapter-title,
.chapter-title.chapter-1 {
  background: linear-gradient(135deg, var(--chapter1-primary), var(--chapter1-secondary));
  color: white !important;
}

.chapter-1 .progress-fill,
.chapter-1 .section-icon,
.chapter-1 .nav-button.next,
.chapter-1 .continue-button {
  background: linear-gradient(135deg, var(--chapter1-primary), var(--chapter1-secondary));
}

/* 第2章 - 青系 */
.chapter-2 .chapter-header,
.chapter-header.chapter-2,
.chapter-2 .chapter-title,
.chapter-title.chapter-2 {
  background: linear-gradient(135deg, var(--chapter2-primary), var(--chapter2-secondary));
  color: white !important;
}

.chapter-2 .progress-fill,
.chapter-2 .section-icon,
.chapter-2 .nav-button.next,
.chapter-2 .continue-button {
  background: linear-gradient(135deg, var(--chapter2-primary), var(--chapter2-secondary));
}

/* 第3章 - オレンジ系 */
.chapter-3 .chapter-header,
.chapter-header.chapter-3,
.chapter-3 .chapter-title,
.chapter-title.chapter-3 {
  background: linear-gradient(135deg, var(--chapter3-primary), var(--chapter3-secondary));
  color: white !important;
}

.chapter-3 .progress-fill,
.chapter-3 .section-icon,
.chapter-3 .nav-button.next,
.chapter-3 .continue-button {
  background: linear-gradient(135deg, var(--chapter3-primary), var(--chapter3-secondary));
}

/* 第4章 - 赤系 */
.chapter-4 .chapter-header,
.chapter-header.chapter-4,
.chapter-4 .chapter-title,
.chapter-title.chapter-4 {
  background: linear-gradient(135deg, var(--chapter4-primary), var(--chapter4-secondary));
  color: white !important;
}

.chapter-4 .progress-fill,
.chapter-4 .section-icon,
.chapter-4 .nav-button.next,
.chapter-4 .continue-button {
  background: linear-gradient(135deg, var(--chapter4-primary), var(--chapter4-secondary));
}

/* 第5章 - 紫系 */
.chapter-5 .chapter-header,
.chapter-header.chapter-5,
.chapter-5 .chapter-title,
.chapter-title.chapter-5 {
  background: linear-gradient(135deg, var(--chapter5-primary), var(--chapter5-secondary));
  color: white !important;
}

.chapter-5 .progress-fill,
.chapter-5 .section-icon,
.chapter-5 .nav-button.next,
.chapter-5 .continue-button {
  background: linear-gradient(135deg, var(--chapter5-primary), var(--chapter5-secondary));
}

/* ========================================
   📦 特殊ボックスの色設定維持
======================================== */

/* 🎯 重要: 特定の背景を持つ要素内の文字色を元の色に維持 */

/* key-term内の文字は元の色を維持 */
.key-term,
.key-term p,
.key-term *,
.key-term-title {
  color: var(--color-key-term) !important; /* 元の濃い黄色を強制適用 */
}

/* personalized-box内の文字は元の色を維持 */
.personalized-box.parent .box-title {
  color: var(--color-parent-accent) !important; /* タイトルのみ濃い緑 */
}

.personalized-box.parent p {
  color: #333333 !important; /* pタグは黒文字 */
}

.personalized-box.educator .box-title {
  color: var(--color-educator-accent) !important; /* 教育者向けアクセント色 */
}

.personalized-box.educator p {
  color: #333333 !important; /* pタグは黒文字 */
}

/* inclusive-box内の文字は元の色を維持 */
.inclusive-box .box-title {
  color: var(--color-inclusive-accent) !important; /* インクルーシブアクセント色 */
}

.inclusive-box p {
  color: #333333 !important; /* pタグは黒文字を維持 */
}

/* checklist内のlabel文字色を元の色に維持 */
.checklist label,
.checklist .checklist-item label {
  color: #333333 !important; /* ライトモード時の黒文字を維持 */
}

/* quiz-section内の文字は元の色を維持 */
.quiz-section .quiz-option {
  color: #333333 !important; /* クイズオプションは黒文字 */
}

/* last-study-content は適切な文字色を維持 */
.last-study-info .last-study-content {
  color: var(--color-text-primary) !important; /* テーマに応じた文字色 */
}

/* ライトモード時は黒文字 */
:root .last-study-info .last-study-content {
  color: #333333 !important;
}

/* ダークモード時は白文字 */
[data-theme="dark"] .last-study-info .last-study-content {
  color: #ffffff !important;
}

/* ========================================
   🌙 ダークモード時：指定要素のフォントを白くする（新規追加）
======================================== */

/* personalized-box parent - ダークモード時は白文字 */
[data-theme="dark"] .personalized-box.parent .box-title {
  color: var(--color-parent-accent) !important; /* タイトルは緑色を維持 */
}

[data-theme="dark"] .personalized-box.parent p,
[data-theme="dark"] .personalized-box.parent span,
[data-theme="dark"] .personalized-box.parent div:not(.box-title),
[data-theme="dark"] .personalized-box.parent li,
[data-theme="dark"] .personalized-box.parent strong,
[data-theme="dark"] .personalized-box.parent em,
[data-theme="dark"] .personalized-box.parent small,
[data-theme="dark"] .personalized-box.parent text {
  color: #ffffff !important; /* ダークモード時は白文字 */
}

/* personalized-box educator - ダークモード時は白文字 */
[data-theme="dark"] .personalized-box.educator .box-title {
  color: var(--color-educator-accent) !important; /* タイトルはオレンジ色を維持 */
}

[data-theme="dark"] .personalized-box.educator p,
[data-theme="dark"] .personalized-box.educator span,
[data-theme="dark"] .personalized-box.educator div:not(.box-title),
[data-theme="dark"] .personalized-box.educator li,
[data-theme="dark"] .personalized-box.educator strong,
[data-theme="dark"] .personalized-box.educator em,
[data-theme="dark"] .personalized-box.educator small,
[data-theme="dark"] .personalized-box.educator text {
  color: #ffffff !important; /* ダークモード時は白文字 */
}

/* checklist - ダークモード時は白文字 */
[data-theme="dark"] .checklist .checklist-title {
  color: var(--color-primary) !important; /* タイトルは青色を維持 */
}

[data-theme="dark"] .checklist p,
[data-theme="dark"] .checklist span,
[data-theme="dark"] .checklist div:not(.checklist-title),
[data-theme="dark"] .checklist li,
[data-theme="dark"] .checklist label,
[data-theme="dark"] .checklist .checklist-item,
[data-theme="dark"] .checklist .checklist-item label,
[data-theme="dark"] .checklist strong,
[data-theme="dark"] .checklist em,
[data-theme="dark"] .checklist small,
[data-theme="dark"] .checklist text {
  color: #ffffff !important; /* ダークモード時は白文字 */
}

/* ========================================
   🌙 ダークモード時の特殊色対応
======================================== */

/* ダークモード時：インラインスタイルで黒文字指定されている要素を白文字に */
[data-theme="dark"] h1[style*="color: #333"],
[data-theme="dark"] h2[style*="color: #333"], 
[data-theme="dark"] h3[style*="color: #333"],
[data-theme="dark"] h4[style*="color: #333"],
[data-theme="dark"] h5[style*="color: #333"],
[data-theme="dark"] h6[style*="color: #333"],
[data-theme="dark"] p[style*="color: #333"],
[data-theme="dark"] div[style*="color: #333"],
[data-theme="dark"] span[style*="color: #333"] {
  color: #ffffff !important; /* ダークモード時は白文字 */
}

/* ダークモード時でも元の色を強制維持する要素 */
[data-theme="dark"] .key-term,
[data-theme="dark"] .key-term p,
[data-theme="dark"] .key-term span,
[data-theme="dark"] .key-term div,
[data-theme="dark"] .key-term li,
[data-theme="dark"] .key-term strong,
[data-theme="dark"] .key-term em,
[data-theme="dark"] .key-term *,
[data-theme="dark"] .key-term-title {
  color: var(--color-key-term) !important; /* 黄色系は維持 */
}

[data-theme="dark"] .inclusive-box .box-title {
  color: var(--color-inclusive-accent) !important; /* 紫系タイトルは維持 */
}

[data-theme="dark"] .inclusive-box p,
[data-theme="dark"] .inclusive-box span,
[data-theme="dark"] .inclusive-box div:not(.box-title),
[data-theme="dark"] .inclusive-box li {
  color: #333333 !important; /* 黒文字維持 */
}

[data-theme="dark"] .quiz-section .quiz-option,
[data-theme="dark"] .quiz-section .quiz-option p,
[data-theme="dark"] .quiz-section .quiz-option span {
  color: #333333 !important; /* クイズオプションは黒文字維持 */
}

/* ========================================
   🎨 設定ページのダークモード対応
======================================== */

/* フォントサイズボタンのダークモード対応 */
[data-theme="dark"] .font-size-button {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

[data-theme="dark"] .font-size-button:hover {
  border-color: var(--color-primary);
  background: rgba(77, 184, 255, 0.1);
}

[data-theme="dark"] .font-size-button .font-size-label,
[data-theme="dark"] .font-size-button .font-size-value {
  color: var(--color-text-primary) !important;
}

/* アクティブ状態は元の色を維持（青背景に白文字） */
[data-theme="dark"] .font-size-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

[data-theme="dark"] .font-size-button.active .font-size-label,
[data-theme="dark"] .font-size-button.active .font-size-value {
  color: white !important;
}

/* その他の設定要素のダークモード対応 */
[data-theme="dark"] .setting-label {
  color: var(--color-text-primary);
}

[data-theme="dark"] .setting-desc {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .select-button {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

[data-theme="dark"] .select-button:hover {
  border-color: var(--color-primary);
}

[data-theme="dark"] .select-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ========================================
   🪟 モーダル・UIコンポーネント
======================================== */

/* モーダル */
[data-theme="dark"] .modal-overlay {
  background: var(--overlay);
}

[data-theme="dark"] .modal {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  box-shadow: 0 10px 30px var(--shadow-heavy);
}

[data-theme="dark"] .modal-header {
  border-bottom: 1px solid var(--color-border-primary);
}

[data-theme="dark"] .modal-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .modal-close {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .modal-close:hover {
  color: var(--color-text-primary);
}

/* マイブックマーク・メモモーダルのタイトル文字色を白に固定 */
[data-theme="dark"] .modal-header.list-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white !important;
}

[data-theme="dark"] .modal-header.list-header .modal-title {
  color: white !important;
}

[data-theme="dark"] .modal-header.list-header h2 {
  color: white !important;
}

/* ========================================
   🎮 インタラクティブ要素
======================================== */

/* ボタン */
[data-theme="dark"] .nav-button {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-primary);
}

[data-theme="dark"] .nav-button:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-focus);
  box-shadow: 0 4px 15px var(--shadow-medium);
}

/* 進捗バー */
[data-theme="dark"] .progress-section {
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-primary);
}

[data-theme="dark"] .progress-bar {
  background: var(--color-border-secondary);
}

[data-theme="dark"] .progress-percentage {
  color: var(--color-primary);
}

/* ========================================
   📝 フォーム要素
======================================== */

[data-theme="dark"] input, 
[data-theme="dark"] textarea, 
[data-theme="dark"] select {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-primary);
}

[data-theme="dark"] input:focus, 
[data-theme="dark"] textarea:focus, 
[data-theme="dark"] select:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--shadow-light);
}

/* ========================================
   📦 コンテンツボックスのダークモード調整
======================================== */

[data-theme="dark"] .highlight-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .warning-box {
  background: var(--color-bg-tertiary);
  border-left: 4px solid var(--color-warning);
  color: var(--color-text-primary);
}

[data-theme="dark"] .personalized-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

/* personalized-boxの左ボーダー色は元の色を維持 */
[data-theme="dark"] .personalized-box.parent {
  border-left: 4px solid var(--color-parent-accent); /* 緑のアクセント（元の色を維持） */
}

[data-theme="dark"] .personalized-box.educator {
  border-left: 4px solid var(--color-educator-accent); /* オレンジのアクセント（元の色を維持） */
}

/* ========================================
   🔴 フローティングアクションボタン
======================================== */

[data-theme="dark"] .fab {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 15px var(--shadow-medium);
}

[data-theme="dark"] .fab:hover {
  background: var(--color-secondary);
  box-shadow: 0 6px 25px var(--shadow-heavy);
}

[data-theme="dark"] .fab.bookmark.active {
  background: var(--color-warning);
}

[data-theme="dark"] .fab.note.active {
  background: var(--color-success);
}

/* ========================================
   🍔 ハンバーガーメニュー
======================================== */

[data-theme="dark"] .hamburger-menu {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  box-shadow: 2px 0 20px var(--shadow-medium);
}

[data-theme="dark"] .menu-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

[data-theme="dark"] .menu-item {
  color: var(--color-text-primary);
}

[data-theme="dark"] .menu-item:hover {
  background: var(--color-bg-tertiary);
}

[data-theme="dark"] .menu-badge {
  background: var(--color-primary);
  color: white;
}

/* ========================================
   📄 章カード（目次ページ）
======================================== */

[data-theme="dark"] .chapter-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .chapter-card:hover {
  box-shadow: 0 4px 20px var(--shadow-medium);
}

[data-theme="dark"] .chapter-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .chapter-description {
  color: var(--color-text-secondary);
}

/* ========================================
   📋 リスト要素
======================================== */

[data-theme="dark"] .bullet-list li {
  color: var(--color-text-primary);
}

[data-theme="dark"] .bullet-list li::marker {
  color: var(--color-primary);
}

/* ========================================
   🍞 トースト通知
======================================== */

[data-theme="dark"] .toast {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  box-shadow: 0 4px 15px var(--shadow-heavy);
}

[data-theme="dark"] .toast.success {
  background: var(--color-success);
}

[data-theme="dark"] .toast.warning {
  background: var(--color-warning);
}

[data-theme="dark"] .toast.error {
  background: var(--color-danger);
}

/* ========================================
   🎚️ チェックボックス・ラジオボタン
======================================== */

[data-theme="dark"] input[type="checkbox"], 
[data-theme="dark"] input[type="radio"] {
  accent-color: var(--color-primary);
}

/* ========================================
   📜 スクロールバー（Webkit）
======================================== */

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ========================================
   🖼️ ダークモード時の画像調整
======================================== */

[data-theme="dark"] img {
  opacity: 0.8;
  transition: opacity var(--transition-normal);
}

[data-theme="dark"] img:hover {
  opacity: 1;
}

/* ========================================
   📱 モバイル対応の調整
======================================== */

@media (max-width: 768px) {
  /* モバイルでのテーマ調整 */
  [data-theme="dark"] .main-content {
    box-shadow: none;
    border-top: 1px solid var(--color-border-primary);
  }
}

/* ========================================
   💻 PC表示時の追加調整
======================================== */

@media (min-width: 769px) {
  /* PC時の背景調整 */
  [data-theme="dark"] body {
    background: var(--color-bg-primary);
  }
  
  [data-theme="dark"] .main-content {
    box-shadow: 0 0 20px var(--shadow-light);
  }
}

/* ========================================
   🎨 テーマ適用用のヘルパークラス
======================================== */

.theme-bg-primary { background: var(--color-bg-primary); }
.theme-bg-secondary { background: var(--color-bg-secondary); }
.theme-bg-tertiary { background: var(--color-bg-tertiary); }

.theme-text-primary { color: var(--color-text-primary); }
.theme-text-secondary { color: var(--color-text-secondary); }
.theme-text-tertiary { color: var(--color-text-tertiary); }

.theme-border { border-color: var(--color-border-primary); }
.theme-border-focus { border-color: var(--color-border-focus); }

.theme-accent { color: var(--color-primary); }
.theme-accent-bg { background: var(--color-primary); }

/* ========================================
   🔄 アニメーション効果
======================================== */

.theme-transition {
  transition: all var(--transition-normal);
}

/* ダークモード切り替え時のアニメーション */
* {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal), 
              border-color var(--transition-normal);
}

/* ========================================
   ♿ アクセシビリティ対応
======================================== */

/* motion sensitivity対応 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
  }
}