/* =========================================================
   謝建騰教學個人網站 - 有機人文／日系生活風格 (Organic Editorial Style)
   色系：米白 (#F9F6F0)、淺灰 (#ECEBE7)、淡綠/鼠尾草綠 (#E3E8E1)
   視覺：襯線字體、手寫註記、微紙質雜訊底紋、圓潤幾何、細緻線條與自然光感
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Noto+Serif+TC:wght@400;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* 自然核心調色盤 */
  --bg-paper: #F9F6F0;           /* 溫潤米白主底色 */
  --bg-sage: #E3E8E1;            /* 柔和鼠尾草淡綠 (過渡與特色區塊) */
  --bg-pebble: #ECEBE7;          /* 柔霧淺灰 (卡片與微區塊) */
  --bg-card: #FFFFFF;            /* 卡片純淨白底 */
  
  /* 細緻線條與文字 */
  --text-ink: #262927;           /* 炭墨黑 (印刷墨水質感，溫和不刺眼) */
  --text-secondary: #575C58;     /* 炭灰次要文字 */
  --text-muted: #828783;         /* 說明微文字 */
  --border-delicate: rgba(38, 41, 39, 0.12); /* 纖細分割線 */
  --border-medium: rgba(38, 41, 39, 0.22);
  
  /* 大膽點綴碰撞色 */
  --accent-terracotta: #C85A32;  /* 陶土磚紅 (手寫標籤、警示) */
  --accent-ochre: #C29B38;       /* 橄欖芥黃 (行動呼籲 CTA、重要焦點) */
  --accent-forest: #3F5646;      /* 森林深綠 (沉穩強調) */
  
  /* 圓潤元素 */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 9999px;
}

body {
  background-color: var(--bg-paper);
  /* 微噪點紙質纖維紋理 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--text-ink);
  font-family: 'Plus Jakarta Sans', 'Noto Serif TC', -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.005em;
  line-height: 1.65;
}

/* 適用頁面：Exam 與 FDM 共用；字體排版 */
/* ================= 襯線與手寫字體混搭 ================= */
h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', 'Noto Serif TC', serif;
  color: var(--text-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Noto Serif TC', sans-serif;
  color: var(--text-ink);
  font-weight: 700;
}

/* 手寫筆觸便箋標籤 */
.handwrite-badge {
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: var(--accent-terracotta);
  display: inline-block;
  transform: rotate(-2deg);
  line-height: 1;
}

.handwrite-note {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  color: var(--accent-terracotta);
}

/* 適用頁面：Exam 與 FDM 共用；.navbar-custom 導覽列 */
/* ================= 頂端導覽列 ================= */
.navbar-custom {
  background: rgba(249, 246, 240, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-delicate) !important;
  padding: 0.9rem 0;
  transition: all 0.3s ease;
}

.navbar-custom .navbar-brand {
  color: var(--text-ink) !important;
  font-family: 'Playfair Display', 'Noto Serif TC', serif;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}

.navbar-custom .navbar-brand i {
  color: var(--accent-forest) !important;
}

.navbar-custom .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.45rem 0.95rem !important;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  color: var(--text-ink) !important;
  background: var(--bg-sage);
}

/* 適用頁面：Exam 與 FDM 共用；按鈕樣式，模組專屬色於檔尾覆寫 */
/* ================= 圓潤膠囊按鈕 (CTA) ================= */
.btn-cta {
  background-color: var(--accent-ochre) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.45rem;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(194, 155, 56, 0.28);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cta:hover {
  background-color: #A9852A !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(194, 155, 56, 0.38);
  color: #FFFFFF !important;
}

.btn-outline-dark {
  border-color: var(--border-medium) !important;
  color: var(--text-ink) !important;
  background: transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.btn-outline-dark:hover {
  background: var(--text-ink) !important;
  color: #FFFFFF !important;
}

/* Bootstrap 內建的 .btn-outline-light 文字／外框預設為極淺色，是設計給深色背景使用；
   本站主題偏淺色（卡片、導覽列皆為米白），套用後按鈕文字在滑鼠移入前幾乎不可見，
   移入的瞬間文字才「跳出」變成可見，容易被誤認為畫面閃爍。改為符合本站淺色主題、
   平時即可見的樣式（例如會員名冊「編輯」按鈕、投稿列表「編輯」按鈕）。 */
.btn-outline-light {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-medium);
  --bs-btn-hover-color: var(--accent-forest);
  --bs-btn-hover-bg: var(--bg-sage);
  --bs-btn-hover-border-color: var(--accent-forest);
  --bs-btn-active-color: var(--accent-forest);
  --bs-btn-active-bg: var(--bg-sage);
  --bs-btn-active-border-color: var(--accent-forest);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--border-delicate);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* 適用頁面：Exam、FDM 和課程後台；.card-fashion 卡片 */
/* ================= 圓潤卡片與不規則編排 ================= */
.card-fashion {
  background: var(--bg-card);
  border: 1px solid var(--border-delicate);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(38, 41, 39, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-ink);
  overflow: hidden;
}

.card-fashion:hover {
  border-color: var(--border-medium);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(38, 41, 39, 0.08);
}

/* 資料列表卡片（內含表格，例如會員名冊／課程清單等後台管理表格）維持穩定，
   不套用滑鼠移入位移／陰影放大動畫。
   原因：這類卡片內含「編輯」等會開啟 Modal 彈窗的按鈕，滑鼠移到按鈕上即會
   觸發整張卡片的位移動畫；點擊當下 Modal 淡入、遮罩浮現，卡片又同時因滑鼠
   離開卡片範圍（被遮罩蓋住）而位移歸位，兩個動畫疊加即造成使用者觀察到的
   「點選編輯 Modal 會閃爍／抖動」。此處讓含表格的卡片不參與位移動畫即可解決。 */
.card-fashion:has(table):hover {
  transform: none;
  box-shadow: 0 10px 30px rgba(38, 41, 39, 0.04);
  border-color: var(--border-delicate);
}

/* 自然綠與米白過渡色塊卡片 */
.card-sage {
  background-color: var(--bg-sage);
  border: 1px solid rgba(63, 86, 70, 0.15);
  border-radius: var(--radius-lg);
}

.card-pebble {
  background-color: var(--bg-pebble);
  border: 1px solid var(--border-delicate);
  border-radius: var(--radius-lg);
}

/* 適用頁面：Exam 與 FDM 共用；Hero Banner */
/* ================= 自然光感 Hero Banner ================= */
.hero-banner {
  background: linear-gradient(135deg, #FAF7F2 0%, #E9EEE7 100%);
  border: 1px solid var(--border-delicate);
  border-radius: 32px;
  padding: 4.5rem 3rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(38, 41, 39, 0.05);
}

/* 模擬自然窗櫺斜射晨光陰影效果 */
.hero-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
  pointer-events: none;
}

/* 自然生活有機標籤 */
.badge-organic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(63, 86, 70, 0.08);
  border: 1px solid rgba(63, 86, 70, 0.2);
  color: var(--accent-forest);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.badge-organic::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-forest);
}

/* 適用頁面：Exam 與 FDM 共用；後台表格 */
/* ================= 精緻表格 (細緻線條與自然紙感) ================= */
.table {
  color: var(--text-ink) !important;
  --bs-table-bg: transparent !important;
  --bs-table-hover-bg: rgba(227, 232, 225, 0.45) !important;
  border-color: var(--border-delicate) !important;
}

.table-light, thead.table-light th {
  background-color: var(--bg-sage) !important;
  color: var(--text-ink) !important;
  border-color: var(--border-delicate) !important;
  font-weight: 700 !important;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 0.95rem 1rem;
}

.table td {
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--border-delicate);
  color: var(--text-ink) !important;
}

/* 等寬代碼標籤 (學號等) */
code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-sage);
  color: var(--accent-forest);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(63, 86, 70, 0.2);
  font-size: 0.88rem;
  font-weight: 600;
}

/* 自然系狀態徽章 */
.badge.bg-success {
  background-color: #3D6B4F !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-danger {
  background-color: #B94A2D !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-primary {
  background-color: #4A6572 !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-secondary {
  background-color: #79827B !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-warning {
  background-color: #D4A338 !important;
  color: #262927 !important;
  font-weight: 700;
}

/* 適用頁面：Exam 與 FDM 共用；Navbar 使用者選單 */
/* ================= 溫潤下拉式選單 ================= */
.dropdown-menu-custom {
  background: #FFFFFF !important;
  border: 1px solid var(--border-delicate);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(38, 41, 39, 0.09);
  padding: 0.6rem;
}

.dropdown-menu-custom .dropdown-item {
  color: var(--text-ink) !important;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-menu-custom .dropdown-item:hover {
  background: var(--bg-sage) !important;
  color: var(--accent-forest) !important;
}

/* 適用頁面：Exam 與 FDM 共用；彈窗及表單 */
/* ================= 彈窗 (Modals) 結構防擋與溫潤紙感 ================= */
.modal {
  z-index: 1065 !important;
  overflow-y: auto !important;
}

.modal-backdrop {
  z-index: 1060 !important;
  background-color: rgba(38, 41, 39, 0.45) !important;
  backdrop-filter: blur(4px);
}

.modal-dialog {
  z-index: 1070 !important;
  position: relative !important;
}

.modal-content {
  background: #FCFAF7 !important;
  border: 1px solid var(--border-delicate);
  border-radius: 24px !important;
  color: var(--text-ink);
  box-shadow: 0 24px 60px rgba(38, 41, 39, 0.15) !important;
  pointer-events: auto !important;
}

.modal-content * {
  pointer-events: auto;
}

/* 表單元件 */
.form-control, .form-select {
  background: #FFFFFF !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-ink) !important;
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  background: #FFFFFF !important;
  border-color: var(--accent-forest) !important;
  box-shadow: 0 0 0 3px rgba(63, 86, 70, 0.18) !important;
  color: var(--text-ink) !important;
}

/* 頁尾 */
footer {
  margin-top: auto;
  background: #EFECE6;
  border-top: 1px solid var(--border-delicate);
  color: var(--text-muted);
  padding: 3rem 0;
}


/* 確保 Modal 彈窗與遮罩層平穩顯示，徹底防範滑鼠移入時的畫面抖動與閃爍 */
.modal {
  transform: none !important;
}
.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out !important;
}
.modal-content {
  pointer-events: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 適用頁面：Exam (.exam-theme)／FDM (.fdm-theme)；專屬操作按鈕配色 */
/* edo_05: Accessible module-specific action colors, matching the reference's warm editorial style. */
.exam-theme { --module-action: #42677A; --module-action-hover: #304E60; --module-action-shadow: rgba(66,103,122,.25); }
.fdm-theme { --module-action: #3F5646; --module-action-hover: #304236; --module-action-shadow: rgba(63,86,70,.25); }
.exam-theme .btn-cta, .fdm-theme .btn-cta {
  background-color: var(--module-action) !important;
  border-color: var(--module-action) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--module-action-shadow);
}
.exam-theme .btn-cta:hover, .fdm-theme .btn-cta:hover,
.exam-theme .btn-cta:focus-visible, .fdm-theme .btn-cta:focus-visible {
  background-color: var(--module-action-hover) !important;
  border-color: var(--module-action-hover) !important;
  box-shadow: 0 6px 16px var(--module-action-shadow);
}
.exam-theme .btn-cta:focus-visible, .fdm-theme .btn-cta:focus-visible {
  outline: 3px solid #C29B38; outline-offset: 2px;
}
/* 適用頁面：Exam 與 FDM；登出紅色／忘記密碼藍色 */
/* Match reference: clear red logout on white; blue, underlined password recovery. */
.exam-theme .dropdown-item.logout-action, .fdm-theme .dropdown-item.logout-action { color: #DC3545 !important; font-weight: 700; }
.exam-theme .dropdown-item.logout-action:hover, .fdm-theme .dropdown-item.logout-action:hover { background: #fff1f2; color: #b42332 !important; }
.exam-theme .forgot-password-link, .fdm-theme .forgot-password-link { color: #0d6efd !important; text-decoration: none !important; font-weight: 500; }
.exam-theme .forgot-password-link:hover, .fdm-theme .forgot-password-link:hover { color: #084298 !important; text-decoration: underline !important; }


/* 適用頁面：Exam exam_select.html；三個考科卡片容器 */
/* edo_06: 考科卡片區縮為原版桌面寬度的 60%，以精簡尺寸呈現；手機保留全寬。 */
.exam-theme .exam-category-row { width: 60%; margin-left: auto; margin-right: auto; }
.exam-theme .exam-category-card {
  --category-color: #b77912;
  --category-soft: #fff7e8;
  border: 2px solid var(--category-color) !important;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(38,41,39,.045);
}
.exam-theme .exam-category-amber { --category-color: #c18a25; --category-soft: #fff7e8; }
.exam-theme .exam-category-rose { --category-color: #bf5866; --category-soft: #fff1f2; }
.exam-theme .exam-category-teal { --category-color: #32816a; --category-soft: #ecf8f3; }
.exam-theme .exam-category-card:hover {border-color:var(--category-color)!important; box-shadow:0 8px 22px rgba(38,41,39,.09);}
.exam-theme .exam-category-icon {font-size:2rem;line-height:1.2;color:var(--category-color);}
.exam-theme .exam-category-title {font-size:1.08rem;line-height:1.35;min-height:2.7em;display:flex;align-items:center;justify-content:center;}
.exam-theme .exam-category-card .btn {font-size:.9rem;padding:.45rem .65rem;}
@media (max-width: 1199.98px) {.exam-theme .exam-category-row {width:85%;}}
@media (max-width: 767.98px) {.exam-theme .exam-category-row {width:100%;}.exam-theme .exam-category-title {min-height:auto;}}

/* 適用頁面：Exam exam_select.html；「確認正式繳交試卷」區塊（桌面 60%，行動裝置自適應）。 */
.exam-theme .exam-final-submit-card { width: 60%; margin-left: auto; margin-right: auto; }
.exam-theme .exam-final-submit-card .btn { max-width: 100%; white-space: normal; }
@media (max-width: 1199.98px) { .exam-theme .exam-final-submit-card { width: 85%; } }
@media (max-width: 767.98px) { .exam-theme .exam-final-submit-card { width: 100%; } }

/* 適用頁面：Exam 全部登入後頁面（包含「投稿作業與作品管理專區」）／Navbar「系統專區」
   edo_09：按鈕在滑鼠移開、下拉選單展開或關閉後維持一致的淺色外觀；避免沿用全站
   .btn-outline-dark:hover 產生黑色底、或按鈕焦點與滑鼠狀態不同步。
   保留 Bootstrap 原生 click / outside-click / Esc 行為，不用 hover 自動打開選單。 */
.exam-theme .navbar-custom .exam-system-toggle,
.exam-theme .navbar-custom .exam-system-toggle:hover,
.exam-theme .navbar-custom .exam-system-toggle:focus,
.exam-theme .navbar-custom .exam-system-toggle:active,
.exam-theme .navbar-custom .exam-system-toggle.show,
.exam-theme .navbar-custom .exam-system-toggle[aria-expanded="true"] {
  color: var(--text-ink) !important;
  background-color: #fff !important;
  border-color: var(--border-medium) !important;
  box-shadow: none !important;
}
.exam-theme .navbar-custom .exam-system-toggle:hover,
.exam-theme .navbar-custom .exam-system-toggle[aria-expanded="true"] {
  background-color: var(--bg-sage) !important;
}
.exam-theme .navbar-custom .exam-system-toggle:focus-visible {
  outline: 2px solid var(--accent-forest);
  outline-offset: 2px;
}
/* 選單項目只有滑鼠實際停留或鍵盤焦點可見時才反白；離開後回復白底。 */
.exam-theme .exam-system-menu .dropdown-item:not(:hover):not(:focus-visible) {
  background-color: transparent !important;
  color: var(--text-ink) !important;
}
.exam-theme .exam-system-menu .dropdown-item:hover,
.exam-theme .exam-system-menu .dropdown-item:focus-visible {
  background-color: var(--bg-sage) !important;
  color: var(--accent-forest) !important;
}

/* edo_10／Exam + 課程進度管理後台：系統專區共用選單（與參考圖一致）。
   課程管理頁面沿用 exam_base.html，勿建立第二份不一致的選單。 */
.exam-theme .unified-admin-menu { min-width: 17rem; max-width: calc(100vw - 2rem); }
.exam-theme .unified-admin-menu .dropdown-item { white-space: normal; }

/* edo_10／Exam 會員帳號管理 CRUD：帳號與 Email 同欄、姓名與權限同欄。 */
.exam-theme .user-identity-cell,
.exam-theme .user-name-role-cell { vertical-align: middle; }
.exam-theme .user-identity-cell { min-width: 12rem; }
.exam-theme .user-name-role-cell { min-width: 9rem; }

/* edo_10／課程進度管理：兩個教材下載設定卡桌面雙欄、手機單欄。 */
.exam-theme .course-admin-settings > [class*="col-"] > .card { margin-bottom: 0; }