/* Bootstrap 5.3 提供版面／導覽／表格；此處只留 Bootstrap 未涵蓋的題庫審查專屬樣式，
   並比照姊妹專案 KutEnglishMock 對齊 StateFlow 品牌視覺（深藍 navbar、深色模式、focus ring）。 */

/* 響應式字級（與 KutEnglishMock 一致）。 */
html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) {
    html { font-size: 16px; }
}
body { margin-bottom: 60px; font-family: system-ui, "Microsoft JhengHei", "Noto Sans TC", sans-serif; }

/* 統一 focus ring（與 KutEnglishMock 一致）。 */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* StateFlow 品牌 */
:root {
    --sf-navy: #1c2b4a;
    --sf-navy-dark: #16223b;
}
.sf-navbar { background-color: var(--sf-navy); }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

/* 亮色維持既有品牌藍（連結、主要按鈕）；深色交還 Bootstrap 5.3 語意變數自動適配。 */
:root:not([data-bs-theme="dark"]) {
    --bs-link-color: #0077cc;
    --bs-link-color-rgb: 0, 119, 204;
    --bs-link-hover-color: #005fa3;
    --bs-link-hover-color-rgb: 0, 95, 163;
}
:root:not([data-bs-theme="dark"]) .btn-primary {
    --bs-btn-bg: #1b6ec2;
    --bs-btn-border-color: #1b6ec2;
    --bs-btn-hover-bg: #1861ac;
    --bs-btn-hover-border-color: #1861ac;
    --bs-btn-active-bg: #1861ac;
    --bs-btn-active-border-color: #1861ac;
    --bs-btn-disabled-bg: #1b6ec2;
    --bs-btn-disabled-border-color: #1b6ec2;
}

/* 主題切換鈕圖示：依 data-bs-theme 顯示對應圖示（純 CSS，無 FOUC）。 */
#theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }
.theme-icon-dark { display: none; }
.theme-icon-light { display: inline; }
[data-bs-theme="dark"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: inline; }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/* 正解選項綠底：語意特定，非 Bootstrap 表格列，故自訂；深色改用較深底＋亮字確保對比。 */
.opt { padding: 4px 8px; border-radius: 4px; margin: 2px 0; }
.opt.correct { background: #d1e7dd; color: #0a3622; font-weight: bold; }
[data-bs-theme="dark"] .opt.correct { background: #143d2b; color: #a3cfbb; }

/* 審查狀態文字色（review.js 依 data-status 切換，狀態列文字沿用這些色）；深色用較亮變體。 */
.status-pass { color: #0a7d23; font-weight: bold; }
.status-issue { color: #c0392b; font-weight: bold; }
.status-pending { color: #888; }
[data-bs-theme="dark"] .status-pass { color: #43a97a; }
[data-bs-theme="dark"] .status-issue { color: #e05a4d; }
[data-bs-theme="dark"] .status-pending { color: #adb5bd; }

/* 題組共用 stimulus 與媒體（邊框／次要文字用 Bootstrap 變數，自動適配深淺色）。 */
.stimulus { border-left: 3px solid var(--bs-border-color); padding: 6px 12px; margin: 8px 0; }
.stimulus-text { white-space: pre-wrap; }
.media-image { max-width: 100%; display: block; margin: 6px 0; }
.media-audio { width: 100%; margin: 6px 0; }
.media-caption { color: var(--bs-secondary-color); font-size: 0.9em; }

/* 審查／內容編修歷程時間軸。 */
.history-container, .content-history-container { border-top: 1px dashed var(--bs-border-color); margin: 6px 0; padding: 6px 0; font-size: 0.9em; }
.history-container ul, .content-history-container ul { margin: 0; padding-left: 18px; }