/* iPAS AI 應用規劃師 自學系統樣式表 */

/* 基礎導航欄按鈕樣式 */
.nav-btn {
  @apply px-3.5 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-100 transition-all flex items-center;
}
.nav-btn.active {
  @apply bg-blue-50 text-blue-600 font-bold;
}

/* 手機版導航欄樣式 */
.mobile-nav-btn {
  @apply flex flex-col items-center justify-center py-1 text-slate-400 text-[10px] font-medium transition;
}
.mobile-nav-btn.active {
  @apply text-blue-600 font-bold;
}

/* 統計卡片 */
.stat-card {
  @apply bg-white rounded-xl border border-slate-200 p-4 sm:p-5 shadow-sm;
}

/* 測驗選項按鈕 - 嚴格單選項單列排版 */
.option-btn {
  @apply w-full text-left p-4 sm:p-4.5 rounded-xl border-2 border-slate-200 bg-white hover:bg-slate-50 text-slate-800 text-sm sm:text-base font-normal transition-all duration-200 flex items-center gap-3.5 relative cursor-pointer shadow-sm;
  display: flex !important;
  width: 100% !important;
}

.option-btn:hover {
  @apply border-blue-400 bg-blue-50/30 shadow-md;
  transform: translateY(-1px);
}

.option-btn.selected {
  @apply border-blue-600 bg-blue-50/80 text-blue-950 ring-2 ring-blue-500/20 font-medium;
}

.option-btn.correct {
  @apply border-emerald-500 bg-emerald-50 text-emerald-950 ring-2 ring-emerald-500/20 font-medium !important;
}

.option-btn.wrong {
  @apply border-rose-500 bg-rose-50 text-rose-950 ring-2 ring-rose-500/20 font-medium !important;
}

.option-indicator {
  @apply w-8 h-8 rounded-lg bg-slate-100 text-slate-600 text-sm font-bold flex items-center justify-center shrink-0 border border-slate-300 transition;
}

.option-btn.selected .option-indicator {
  @apply bg-blue-600 text-white border-blue-600 shadow-sm;
}

.option-btn.correct .option-indicator {
  @apply bg-emerald-600 text-white border-emerald-600 shadow-sm;
}

.option-btn.wrong .option-indicator {
  @apply bg-rose-600 text-white border-rose-600 shadow-sm;
}

/* 題號調色盤 (Palette) 按鈕 */
.palette-btn {
  @apply w-7 h-7 rounded-lg text-xs font-bold flex items-center justify-center border transition;
}
.palette-btn.unanswered {
  @apply bg-slate-100 text-slate-500 border-slate-200 hover:bg-slate-200;
}
.palette-btn.answered {
  @apply bg-blue-600 text-white border-blue-600;
}
.palette-btn.current {
  @apply ring-2 ring-blue-500 ring-offset-1 font-black;
}

/* 筆記與 Markdown 樣式增強 */
.markdown-body {
  @apply text-slate-700 leading-relaxed text-sm;
}

.markdown-body h3 {
  @apply text-base font-bold text-slate-900 mt-4 mb-2 pb-1 border-b border-slate-100;
}

.markdown-body table {
  @apply w-full text-xs text-left border-collapse my-3 rounded-lg overflow-hidden border border-slate-200;
}

.markdown-body th {
  @apply bg-slate-100 p-2.5 font-bold text-slate-700 border-b border-slate-200;
}

.markdown-body td {
  @apply p-2.5 border-b border-slate-100 text-slate-600;
}

.markdown-body ul {
  @apply list-disc list-inside space-y-1 my-2;
}

.markdown-body code {
  @apply px-1.5 py-0.5 bg-slate-100 text-rose-600 rounded text-xs font-mono;
}

.markdown-body pre {
  @apply bg-slate-900 text-slate-100 p-3 rounded-xl text-xs font-mono my-2 overflow-x-auto;
}