/* =====================================================================
   ポートフォリオ支援システム デザインシステム CSS
   詳細は DESIGN_GUIDE.md を参照
===================================================================== */

* { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
}

/* フォーカス表示（キーボード操作対応） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

/* ボタン共通 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background-color: #1976D2; color: #fff; }
.btn-primary:hover { background-color: #125A9C; }
.btn-accent { background-color: #43A047; color: #fff; }
.btn-accent:hover { background-color: #357A38; }
.btn-outline { background-color: #fff; color: #1976D2; border-color: #1976D2; }
.btn-outline:hover { background-color: #F5F7FA; }
.btn-danger { background-color: #D32F2F; color: #fff; }
.btn-danger:hover { background-color: #A82424; }
.btn-secondary { background-color: #E0E0E0; color: #212121; }
.btn-secondary:hover { background-color: #cfcfcf; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* フォーム部品 */
.form-label {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0.375rem;
  color: #212121;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  font-size: 1rem;
  padding: 0.625rem 0.875rem;
  min-height: 44px;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  background-color: #fff;
  line-height: 1.6;
}
.form-textarea { min-height: 120px; line-height: 1.7; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 2px solid #1976D2;
  outline-offset: 1px;
  border-color: #1976D2;
}
.form-hint { font-size: 0.875rem; color: #616161; margin-top: 0.25rem; }
.form-error { font-size: 0.875rem; color: #D32F2F; margin-top: 0.25rem; }

/* カード */
.card {
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* バッジ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
}
.badge-required { background-color: #FDECEA; color: #D32F2F; }
.badge-success { background-color: #E8F5E9; color: #388E3C; }
.badge-warning { background-color: #FFF3E0; color: #F57C00; }
.badge-info { background-color: #E3F2FD; color: #1976D2; }
.badge-muted { background-color: #F5F7FA; color: #616161; }

/* プログレスバー */
.progress-track {
  width: 100%;
  height: 12px;
  background-color: #E0E0E0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: #1976D2;
  transition: width 0.3s ease;
}

/* テーブル */
.table-base { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table-base th {
  background-color: #F5F7FA;
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 700;
  border-bottom: 2px solid #E0E0E0;
  white-space: nowrap;
}
.table-base td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #E0E0E0;
  vertical-align: top;
}
.table-base tr:hover td { background-color: #F5F7FA; }

/* サイドバー */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #212121;
  min-height: 44px;
}
.sidebar-link:hover { background-color: #F5F7FA; }
.sidebar-link.active { background-color: #E3F2FD; color: #1976D2; font-weight: 700; }

/* トースト通知 */
.toast {
  min-width: 280px;
  max-width: 420px;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.toast-success { background-color: #388E3C; }
.toast-error { background-color: #D32F2F; }
.toast-warning { background-color: #F57C00; }
.toast-info { background-color: #1976D2; }

/* モーダル */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(33,33,33,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 1rem;
}
.modal-panel {
  background: #fff; border-radius: 0.75rem; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 1.5rem;
}

@media (max-width: 768px) {
  .sidebar-mobile-hidden { display: none; }
}

/* -------------------------------------------------------------------
   開発用簡易ログインボタン（サンドボックス環境限定表示）
   ------------------------------------------------------------------- */
.quick-login-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  text-align: left;
}
.quick-login-btn:active { transform: translateY(1px); }
.quick-login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.quick-login-btn i { width: 1.1em; text-align: center; flex-shrink: 0; }

.quick-login-admin { background-color: #FFF3E0; color: #E65100; border-color: #FFD8A8; }
.quick-login-admin:hover:not(:disabled) { background-color: #FFE0B2; }

.quick-login-supervisor { background-color: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.quick-login-supervisor:hover:not(:disabled) { background-color: #BBDEFB; }

.quick-login-trainee { background-color: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }
.quick-login-trainee:hover:not(:disabled) { background-color: #C8E6C9; }

@media (max-width: 480px) {
  .quick-login-btn { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
}

/* -------------------------------------------------------------------
   通知エリア（Phase 1.6-B-3-7 タスク3, DEC-051, DEC-053, DEC-058）
   既存.badgeとは別に .notification-area- プレフィックスで名前空間分離
   （3-7: 既存機能への影響防止のためのCSS名前空間工夫）
   ------------------------------------------------------------------- */
.notification-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.notification-area-item { background-color: #F5F7FA; }
.notification-area-item-clickable { cursor: pointer; }
.notification-area-item-clickable:hover { background-color: #E3F2FD; }
.notification-area-item-clickable:focus-visible {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   AI校正結果パネル（Phase 1.6-B-3-7 タスク6-5, DEC-050/055/058）
   既存.cardや.badgeとは別に .ai-review- プレフィックスで名前空間分離
   （タスク3の.notification-area-パターンに準拠、既存機能への影響防止）
   ------------------------------------------------------------------- */
.ai-review-result-panel {
  background-color: #FAFAFA;
  border-color: #E0E0E0;
}
.ai-review-result-group-title { border-bottom: 1px solid #E0E0E0; padding-bottom: 0.25rem; }
.ai-review-result-item {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
}
.ai-review-result-original {
  color: #757575; /* 元テキストは打消し線+グレーで「変更前」を示す */
  text-decoration: line-through;
}
.ai-review-result-suggested {
  color: #1B5E20; /* コントラスト比4.5:1以上（背景#FFFFFF比）を確保した緑 */
  font-weight: 700;
}
.ai-review-result-warning {
  background-color: #FFF3E0;
  color: #7A4100; /* 背景#FFF3E0に対しコントラスト比4.5:1以上を確保 */
  border: 1px solid #FFE0B2;
}
.ai-review-result-btn-row { flex-wrap: wrap; }

/* -------------------------------------------------------------------
   チャット壁打ちダイアログ（Phase 1.6-B-3-7 タスク7-7, DEC-050/055/058）
   .ai-review-* / .notification-area-* パターンに準拠し .chat-dialog- で
   名前空間分離。既存.modal-overlay/.modal-panelはそのまま併用する。
   ------------------------------------------------------------------- */
.chat-dialog-panel {
  max-width: 520px;
  display: flex;
  flex-direction: column;
}
.chat-dialog-history {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem;
}
.chat-dialog-message { display: flex; }
.chat-dialog-message-user { justify-content: flex-end; }
.chat-dialog-message-assistant { justify-content: flex-start; }
.chat-dialog-message-bubble {
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-dialog-bubble-user {
  background-color: #1976D2; /* brand-primary */
  color: #FFFFFF; /* コントラスト比4.5:1以上を確保 */
}

/* -------------------------------------------------------------------
   壁打ち使用前警告モーダル（v1.6.0-p4、Q196-b/Q201-a）
   ChatDialog.js内にネストした.modal-overlayのため、既存.modal-overlay
   （z-index:50）より手前に表示されるようz-indexを引き上げる。
   ------------------------------------------------------------------- */
.chat-disclaimer-overlay {
  z-index: 60; /* 親.modal-overlay(z-index:50)より手前に表示するため引き上げ */
}
.chat-disclaimer-panel {
  max-width: 28rem;
}

.chat-dialog-bubble-assistant {
  background-color: #F5F7FA; /* bg-subtle */
  color: #212121; /* text-primary、背景比コントラスト比4.5:1以上を確保 */
  border: 1px solid #E0E0E0;
}

/* -------------------------------------------------------------------
   v1.10.0 Phase D UX改善 第1弾（DEC-196、屋宜様確定指示 2026-10-05）
   PptxAdvisorModal.jsの「この箇所を修正する」ボタンからのジャンプ時、
   PortfolioEdit.jsの該当セクションカードを一時的に黄色背景でハイライトし、
   フェードアウトさせる（ユーザーがスクロール先を見失わないための視覚補助）。

   v1.10.0 Phase D UX改善 第2弾（屋宜様実機目視確認フィードバック、2026-10-05）
   「ハイライトが薄く、約1秒で消失して気付きにくい」との指摘を受け、
   (a) 背景色をより濃い黄色(#FFF59D)へ変更し、左ボーダーでセクション境界を明示、
   (b) 静止表示時間を2秒→5秒へ延長、フェードアウトは1〜2秒かけて穏やかに
       （トータル表示時間を約1.6秒→約6〜7秒へ延長）。
   タイミング制御自体はPortfolioEdit.js側のsetTimeout値変更で対応し、本CSSは
   配色・ボーダー・トランジション秒数（fadeoutの所要時間）のみを定義する。
   ------------------------------------------------------------------- */
.pf-section-jump-highlight {
  /* 付与された瞬間に即座に濃い黄色＋左ボーダーを表示する（transitionは
     fadeout側にのみ付与し、ハイライト出現自体はフェードインさせない）。 */
  background-color: #FFF59D; /* 濃い黄色（第2弾強化、旧#FFF9C4より明確に） */
  border-left: 6px solid #FBC02D; /* セクション境界明示用の濃い黄色ボーダー */
}
.pf-section-jump-highlight-fadeout {
  /* フェードアウト専用クラスを追加した瞬間からtransitionが有効になり、
     現在の黄色からtransparentへ1.5秒かけて穏やかに変化する（第2弾強化）。 */
  transition: background-color 1.5s ease-out, border-left-color 1.5s ease-out;
  background-color: transparent;
  border-left-color: transparent;
}

/* =====================================================================
   v1.10.0 Phase D UX改善 第2弾（屋宜様実機目視確認フィードバック、2026-10-05）
   PptxAdvisorModal.js（学会規定チェック結果モーダル）の視認性強化。
   修正1: 各指摘項目カードの深刻度アイコン拡大・背景色/左ボーダー強調・
          項目番号のbold化とフォントサイズ拡大。
   修正2: 件数表示を独立したサマリーボックスとして再設計し、各件数を
          大きな深刻度カラーのフォントで表示、クリア率の進捗バーを追加。
   判定ロジック・レスポンス構造には一切影響しない表示専用スタイル。
   ===================================================================== */

/* --- 修正1: 項目カードの深刻度別強調表示 --- */
.pptx-advisor-item {
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}
.pptx-advisor-item--blocking {
  background-color: #FDECEA; /* 薄赤 */
  border-left: 5px solid #D32F2F; /* 太い赤ボーダー */
}
.pptx-advisor-item--warning {
  background-color: #FFF8E1; /* 薄黄 */
  border-left: 5px solid #F57C00; /* 太い橙ボーダー */
}
.pptx-advisor-item--advice {
  background-color: #E3F2FD; /* 薄青 */
  border-left: 5px solid #1976D2; /* 太い青ボーダー */
}
.pptx-advisor-item--passed {
  background-color: #FFFFFF;
  border-left: 1px solid #E0E0E0;
}
/* 深刻度アイコンの拡大（最低1.5倍目安: 既存1em相当 → 1.6em） */
.pptx-advisor-item-icon {
  font-size: 1.6em;
  line-height: 1.2;
}
/* 項目番号【A1】等のbold化・フォントサイズ拡大 */
.pptx-advisor-item-number {
  font-weight: 700;
  font-size: 1.05em;
  color: #212121; /* text-primary、本文とのコントラスト比4.5:1以上を確保 */
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  margin-right: 0.25rem;
}
.pptx-advisor-item-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #212121; /* コントラスト比4.5:1以上（白系背景・薄色背景いずれでも確保） */
}

/* --- 修正2: サマリーボックス（件数表示の独立化・大型化） --- */
.pptx-advisor-summary-box {
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background-color: #F5F7FA; /* bg-subtle */
  border: 1px solid #E0E0E0;
}
.pptx-advisor-summary-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.pptx-advisor-count {
  font-size: 1.35rem; /* 既存0.875rem(text-sm)相当から約1.5倍 */
  font-weight: 600;
  white-space: nowrap;
}
.pptx-advisor-count strong {
  font-size: 1.15em;
  font-weight: 800;
}
.pptx-advisor-count--blocking { color: #D32F2F; }
.pptx-advisor-count--warning { color: #F57C00; }
.pptx-advisor-count--advice { color: #1976D2; }
.pptx-advisor-count--passed { color: #2E7D32; }
.pptx-advisor-count-total {
  font-size: 0.875rem;
  color: #616161; /* text-secondary */
  align-self: center;
}
/* クリア率の進捗バー */
.pptx-advisor-progress-track {
  width: 100%;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #E0E0E0;
  overflow: hidden;
}
.pptx-advisor-progress-fill {
  height: 100%;
  background-color: #2E7D32; /* passed系と同系色 */
  transition: width 0.4s ease-out;
}
.pptx-advisor-progress-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #616161;
  text-align: right;
}

/* =====================================================================
   v1.12.0 Phase F 図表AI機能（Vision対応版、DEC-198, AD-011, AD-012）
   ChartAIModal.js専用スタイル。既存 .pptx-advisor-* / .ai-review-* と
   同様に .chart-ai- プレフィックスで名前空間分離する（既存機能への影響防止）。
   ===================================================================== */
.chart-ai-panel {
  max-width: 720px;
}
.chart-ai-tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #E0E0E0;
  flex-wrap: wrap;
}
.chart-ai-tab-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #616161; /* text-secondary */
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.chart-ai-tab-btn:hover { color: #1976D2; }
.chart-ai-tab-btn--active {
  color: #1976D2; /* brand-primary */
  border-bottom-color: #1976D2;
}

.chart-ai-error-box {
  background-color: #FDECEA;
  color: #B71C1C; /* 背景#FDECEAに対しコントラスト比4.5:1以上を確保 */
  border: 1px solid #F5C6CB;
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
}

/* PII警告バナー（DEC-119準拠）：赤色強調、常に目立つ位置に表示 */
.chart-ai-pii-banner {
  background-color: #FDECEA;
  color: #B71C1C;
  border: 2px solid #D32F2F;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.chart-ai-pii-inline-alert {
  color: #B71C1C;
  font-size: 0.8rem;
  font-weight: 600;
}

/* 新規提案カード */
.chart-ai-suggestion-card {
  background-color: #F5F7FA;
  border: 1px solid #E0E0E0;
  border-left: 4px solid #1976D2;
  border-radius: 0.375rem;
  padding: 0.75rem;
}
.chart-ai-suggestion-icon {
  font-size: 1.4em;
  line-height: 1.2;
}

/* Vision判定カード（既存図表分析・整合性チェック共通、深刻度別配色） */
.chart-ai-judgement-card {
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #E0E0E0;
}
.chart-ai-judgement--ok {
  background-color: #E8F5E9; /* 薄緑 */
  border-left: 4px solid #2E7D32;
}
.chart-ai-judgement--warn {
  background-color: #FFF8E1; /* 薄黄 */
  border-left: 4px solid #F57C00;
}
.chart-ai-judgement--pii {
  background-color: #FDECEA; /* 薄赤（PII優先表示） */
  border-left: 4px solid #D32F2F;
}

/* サマリーボックス（分析件数等） */
.chart-ai-summary-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  background-color: #F5F7FA;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.chart-ai-summary-count--warn { color: #F57C00; }

/* 学会規定準拠判定ボックス（3段階） */
.chart-ai-compliance-box {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #E0E0E0;
}
.chart-ai-compliance-level { font-size: 0.95rem; }
.chart-ai-compliance--ok {
  background-color: #E8F5E9;
  border-color: #2E7D32;
}
.chart-ai-compliance--warn {
  background-color: #FFF8E1;
  border-color: #F57C00;
}
.chart-ai-compliance--ng {
  background-color: #FDECEA;
  border-color: #D32F2F;
}

/* 画像選択チェックボックス（分析対象画像のサムネイル付きチェックリスト） */
.chart-ai-image-select-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.375rem;
  cursor: pointer;
  max-width: 11rem;
}
.chart-ai-image-select-item:hover { background-color: #F5F7FA; }
.chart-ai-image-thumb {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

/* 図表AIボタン自動提案バッジ（PortfolioEdit.js、通知の赤丸パターン） */
.chart-ai-auto-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  background-color: #D32F2F;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9999px;
  margin-left: 0.25rem;
}

/* =====================================================================
   PF-012: PF一覧の階層化表示（フォルダ型ツリー、DEC-201）
   文字サイズ16px(1rem)以上、文字色#212121(text-primary)/背景白でコントラスト比
   16.1:1、件数の薄い色表示も#616161(text-secondary)で4.5:1以上を確保する。
   ===================================================================== */
.pf-tree-view { font-size: 1rem; color: #212121; }
.pf-tree-root, .pf-tree-children { list-style: none; margin: 0; padding: 0; }
.pf-tree-children { padding-left: 1.75rem; }
.pf-tree-node { margin-bottom: 0.25rem; }
.pf-tree-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 1rem;
  min-height: 44px; /* キーボード/タッチ操作のフォーカスターゲットを十分に確保 */
}
.pf-tree-toggle:hover { background-color: #F5F7FA; }
.pf-tree-toggle:focus-visible {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
  background-color: #F5F7FA;
}
.pf-tree-label { font-weight: 600; }
.pf-tree-count { color: #616161; font-size: 1rem; } /* text-secondary、白背景でコントラスト比4.5:1超 */
/* 0件は薄い色で表示する(DEC-201)。ただし白背景とのコントラスト比4.5:1以上を
   確保するため #757575 を採用する(#9E9E9E 等のより薄い色はコントラスト比
   2.68 等になり基準未達のため使用しない)。 */
.pf-tree-empty .pf-tree-count { color: #757575; }
.pf-tree-empty .pf-tree-label { color: #757575; }
.pf-tree-leaf-content { padding-left: 1.5rem; margin-bottom: 0.5rem; }