/* your_project/static/css/base.css */

/* ⭐ 新增：CSS 變數與字體大小基礎設定 ⭐ */
:root {
    --base-font-size: 1.1rem;
    --heading-scale: 1.2;
}

body {
    background-color: #f8f9fa;  /* 米白 */
    color: #333;
    font-family:
        "M PLUS Rounded 1c",
        "Microsoft JhengHei",
        "PingFang TC",
        "Noto Sans TC",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--base-font-size);
    line-height: 1.6;
    transition: font-size 0.3s ease-in-out; /* 增加過渡效果 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: "M PLUS Rounded 1c", sans-serif;
    line-height: 1.4;
    font-weight: bold;
    color: #007bff; /* 主色調 */
}
h1 { font-size: calc(var(--base-font-size) * var(--heading-scale) * 1.5); }
h2 { font-size: calc(var(--base-font-size) * var(--heading-scale)); }
h3 { font-size: calc(var(--base-font-size) * var(--heading-scale) * 0.85); }
.small-text { font-size: calc(var(--base-font-size) * 0.85); }


.navbar {
    background-color: #0096c7;  /* 天藍 */
}

.navbar-brand, .nav-link, .nav-item, .dropdown-item, .font-size-switcher span {
    color: #fff !important;
}
/* 讓品牌名稱在窄螢幕不爆版，與上面 inline style 對齊 */
.navbar .navbar-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Offcanvas 內的 nav link 稍微大一點、行距舒適 */
.offcanvas .nav-link { padding: .5rem 0; font-size: 1.05rem; }
.dropdown-item:hover {
    background-color: #48cae4;
}

.container {
    padding-top: 2rem;
}

footer {
    background-color: #e0f7fa;
    color: #555;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 3rem;
}

.card-body img {
    object-fit: cover;
}
        
#tsparticles {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

/* Tab 導航 CSS */
#pendingCommentsTab .nav-link {
    color: #000000 !important;
}
#pendingCommentsTab .nav-link.active {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-bottom-color: transparent !important;
}
#pendingCommentsTab .nav-link:hover {
    color: #0056b3 !important;
}
.tab-content .table-responsive {
    margin-top: 0 !important;
}
.tab-content {
    padding-top: 0 !important;
}
.card-body.pending-comments-card-body {
    padding-top: 1rem;
}

/* 註釋及高亮相關 */
.glossary-list-section {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}
.glossary-list-section h3 {
    color: #333;
    margin-bottom: 15px;
}
.glossary-list-section dt {
    font-weight: bold;
    color: #0056b3;
    margin-top: 10px;
}
.glossary-list-section dd {
    margin-left: 20px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ddd;
}
.glossary-list-section dd:last-of-type {
    border-bottom: none;
}
.glossary-list-section dd small {
    color: #666;
    font-size: 0.85em;
}

/* 註解詞彙的高亮樣式 */
.glossary-term {
    color: blue;
    cursor: help;
}

/* 浮動顯示框的樣式 */
#glossary-tooltip {
  position: fixed;
  left: -9999px;   /* 初始離線，避免出現在角落 */
  top: -9999px;
  display: none;   /* 由 JS 控制顯示 */
  z-index: 10000;
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  pointer-events: none;
  max-width: 300px;
  box-shadow: 0 10px 30px rgba(2,132,199,.25);
}
.glossary-term::before,
.glossary-term::after {
  content: none !important;
}
#glossary-tooltip strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1em;
}

/* ⭐ 高亮文字樣式 ⭐ */
.highlight {
    background-color: yellow;
    padding: 2px 0;
    border-radius: 3px;
}
/*
 * 左側欄連結樣式優化
 * 針對 .list-group-item 內的 a 標籤
 */
.list-group-item a {
    text-decoration: none; /* 移除文字底線 */
    color: #343a40;       /* 自訂連結顏色，這裡使用深灰色 */
    display: block;       /* 讓連結填滿整個 li 區塊 */
    padding: 0;           /* 移除預設的內邊距，由 li 標籤處理 */
}

/*
 * 當滑鼠懸停在連結上時的樣式
 * 讓連結顏色變深
 */
.list-group-item a:hover {
    color: #000;          /* 懸停時的顏色，這裡使用黑色 */
}

/*
 * 處理 .list-group-item-action:hover 樣式
 * 因為 Bootstrap 的 hover 樣式可能會覆蓋你的設定
 */
.list-group-item-action:hover {
    color: #000;
    background-color: #f8f9fa; /* 淺灰色背景，讓滑鼠懸停效果更明顯 */
}

/*
 * 確保 list-group-item-light 內的連結顏色正確
 */
.list-group-item-light a {
    color: #343a40; /* 確保連結顏色在淺色背景下可見 */
}

/*
 * 你也可以為活躍的連結設定顏色，例如
 */
.list-group-item.active a {
  color: #fff !important; /* 確保活躍連結的文字是白色的 */
}
/* 顯示圖片相關 */
.small-image {
max-width: 100px; /*設定初始最大寬度，您可以調整這個值*/
height: auto;
cursor: pointer; /*顯示滑鼠游標表示可以點擊*/
transition: transform 0.3s ease-in-out; /*可選：添加平滑的縮放過渡效果 */
}

.small-image.original-size {
max-width: none; /* 移除最大寬度限制*/
width: auto;     /* 讓圖片恢復原始寬度 */
}

/* ⭐ 新增：手機瀏覽時，導覽列搜尋框和字體調整按鈕的排版優化 ⭐ */
@media (max-width: 991.98px) {
    .navbar-collapse .d-flex.me-lg-2 {
        flex-direction: column;
        align-items: stretch;
    }
    .navbar-collapse .d-flex > * {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
        width: 100%;
    }
    .navbar-collapse .font-size-switcher {
        justify-content: center;
    }
}

/* ==============================
   ✨ 視覺美化（不更動既有功能）
   直接貼到 base.css 最後即可
   ============================== */

/* 主題色系（不覆蓋你現有變數，只作補充） */
:root {
  --primary-600: #0ea5e9;   /* 天藍 */
  --primary-700: #0284c7;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-700: #334155;
}

/* 讓 navbar 有淡淡的玻璃霧面效果，維持 .navbar-dark 行為 */
.navbar {
  backdrop-filter: saturate(120%) blur(6px);
  background: linear-gradient(90deg, #0096c7, #00b4d8) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}
.navbar .nav-link {
  opacity: 0.95;
  transition: opacity .15s ease, transform .15s ease;
}
.navbar .nav-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* 搜尋表單與下拉更圓潤、陰影更柔和 */
.navbar .form-control,
.navbar .form-select {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
}
.navbar .form-control::placeholder { color: rgba(255,255,255,.85); }
.navbar .form-control:focus,
.navbar .form-select:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(2,132,199,.25);
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.18);
}

/* 字體大小切換器的按鈕更清楚 */
.font-size-switcher .btn {
  border-radius: 999px;
  line-height: 1;
  padding: .25rem .6rem;
}

/* 頁面主要卡片微動效與柔和陰影 */
.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.10);
}

/* 列表群組更清晰的 hover，維持你原本選色 */
.list-group-item {
  border: 1px solid var(--neutral-200);
}
.list-group-item-action:hover {
  background-color: var(--neutral-50);
}

/* 文章內容文字區塊更易讀（不改你段落 DOM） */
.paragraph-content {
  font-size: 1.05rem;
  line-height: 1.9;
}

/* 分頁樣式潤飾（Bootstrap 結構不變） */
.pagination .page-link {
  border: none;
  margin: 0 .125rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.pagination .page-item.active .page-link {
  background: var(--primary-600);
}
.pagination .page-link:hover {
  background: var(--neutral-100);
}

/* Alert 視覺一致性 */
.alert {
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Footer 漸層與內距 */
footer {
  background: linear-gradient(90deg, #00b4d8, #48cae4);
  color: #fff;
  padding: 1.25rem 0;
  margin-top: 3rem;
  box-shadow: 0 -8px 24px rgba(2,132,199,.08);
}

/* 你原有的 tooltip 與 highlight 功能不動，只加上更細緻的外觀 */
#glossary-tooltip {
  /* 原本就 fixed，保持功能 */
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px rgba(2,132,199,.25);
}
#tooltip-term { color: #fff; }
#tooltip-definition { color: #e2e8f0; }

/* 高亮維持你原本的 yellow，只是讓邊緣柔和一點 */
.highlight {
  background-color: #fff59d;
  padding: 2px 4px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
  transition: background-color .15s;
}
.highlight:hover { background-color: #ffe082; }

/* Modal 的圖像更平滑 */
.modal-content {
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}

/* 表單元件 focus 一致 */
.form-control:focus, .form-select:focus, .btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(2,132,199,.25) !important;
  border-color: var(--primary-600);
}

/* 小徽章一致色彩 */
.badge.bg-secondary { background-color: var(--neutral-700) !important; }

/* RWD 補強：行動裝置上卡片間距更舒服 */
@media (max-width: 575.98px) {
  .card { border-radius: 12px; }
  .navbar .form-control, .navbar .form-select { margin-bottom: .25rem; }
}
/* === Tooltip 安全設定（新增） === */
#glossary-tooltip {
  position: fixed;                 /* 以視窗為座標 */
  left: -9999px; top: -9999px;     /* 初始離線，避免閃在角落 */
  display: none;                   /* 交給 JS 控制顯示 */
  z-index: 10000;
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  pointer-events: none;            /* 不攔滑鼠事件 */
  max-width: 300px;
  box-shadow: 0 10px 30px rgba(2,132,199,.25);
}

/* 一刀斷絕任何可能加問號的偽元素（若你沒用偽元素做別的，就放心加） */
.glossary-term::before,
.glossary-term::after {
  content: none !important;
}

/* 浮動字體面板 */
.font-fab{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1055; /* 高於 navbar */
  display: inline-flex;
  gap: .25rem;
  padding: .25rem .4rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.font-fab .btn-sm{
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
  line-height: 1;
  padding: .2rem .45rem;
  background: transparent;
}
.font-fab .btn-sm.active{
  background: rgba(255,255,255,.9);
  color: #111;
}

/* 可選：當滑到一定位置時讓面板微隱 */
@media (pointer: fine){
  .font-fab{ opacity: .95; transition: opacity .2s ease; }
  .font-fab:hover{ opacity: 1; }
}

/* 修正 dropdown 文字顏色 */
.dropdown-menu {
  background-color: #fff;
}
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text {
  color: #212529 !important; /* Bootstrap 預設深灰 */
}
.dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #000 !important;
}
.offcanvas .btn-outline-light,
.dropdown-menu .btn-outline-light {
  background-color: #212529 !important; /* 深灰背景 */
  color: #fff !important;              /* 白字 */
  border-color: #212529 !important;
}

.offcanvas .btn-outline-light:hover,
.dropdown-menu .btn-outline-light:hover {
  background-color: #000 !important;
  color: #fff !important;
}

mark.search-hit {
  padding: 0 .15em;
  border-radius: .2em;
  background: linear-gradient(to top, rgba(255,230,140,.95), rgba(255,230,140,.5));
}

/* ===== Sidebar 2.0 ===== */
.sidebar-sticky{
  position: sticky;
  top: 96px;                 /* 視你的 navbar 高度調整 */
}

.side-card{
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(2,132,199,.06);
  padding: 14px 14px;
}

.side-card + .side-card{ margin-top: 1rem; }

.side-card-title{
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--neutral-700);
  margin: 2px 2px 10px;
}

/* 使用者卡片 */
.user-card .avatar-wrap{
  display: inline-block;
  padding: 3px;
  border-radius: 999px;
  background:
    radial-gradient(100% 100% at 100% 0, #c8f6ff, #7bd1ff) padding-box,
    conic-gradient(from 180deg at 50% 50%, #48cae4, #00b4d8, #0ea5e9, #48cae4) border-box;
}
.user-card .avatar-lg{
  width: 64px; height: 64px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  border: 3px solid #fff;
}

/* 導覽連結 */
.side-links{ display: grid; gap: 6px; }
.side-link{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #1f2937;
  border: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.side-link .icon{ text-align: center; opacity: .9; }
.side-link:hover{
  background: var(--neutral-50);
  border-color: var(--neutral-200);
  transform: translateY(-1px);
}
.side-link.active{
  background: linear-gradient(90deg, rgba(14,165,233,.12), rgba(14,165,233,.06));
  border-color: rgba(14,165,233,.35);
  box-shadow: 0 6px 16px rgba(2,132,199,.10) inset;
}

/* 小紅點/數量 */
.side-badge{
  margin-left: auto;
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-size: .75rem;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
  background: #ef4444;
}

/* 分類晶片 */
.side-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.side-chip{
  display: inline-block;
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  background: #f1f5f9;
  color: #0f172a;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.side-chip:hover{
  background: #e2e8f0;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
  border-color: #cbd5e1;
}

/* RWD：窄螢幕下，取消 sticky 並拉大間距 */
@media (max-width: 991.98px){
  .sidebar-sticky{ position: static; top: auto; }
  .side-card{ border-radius: 14px; }
}

.post-paragraph-text{ text-indent: 2em; }

/* 文章分類：橫向排列 + 勾選框在左、垂直置中 */
.category-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.category-inline > li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
}
.category-inline > li > input[type="checkbox"] { margin: 0; }
.category-inline > li > label { margin: 0; line-height: 1.35; }

/* 2) 若 crispy/Bootstrap 產生 .form-check 結構，強制橫排 */
.category-inline .form-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
}
.category-inline .form-check-input {
  float: none;          /* 取消 Bootstrap 預設的 float */
  margin: 0;            /* 取消頂端間距，避免「在上面」 */
}
.category-inline .form-check-label { margin: 0; line-height: 1.35; }

/* 3) 若 crispy 把 <ul> 外包在欄位容器（保險用） */
#div_id_categories ul.category-inline { padding: 0; margin: 0; }
#div_id_categories ul.category-inline > li { display:inline-flex; align-items:center; gap:.4rem; }
/* 水平排列 + 勾選框在左、與文字對齊 */
#category-field .category-inline{
  display: flex; flex-wrap: wrap;
  gap: .5rem 1rem; padding: 0; margin: 0; list-style: none;
}
#category-field .cat-item{
  display: inline-flex; align-items: center; gap: .45rem;
}
#category-field .cat-label{ margin: 0; line-height: 1.35; }

/* 強制顯示 checkbox（避免被其他樣式藏起來） */
#category-field input[type="checkbox"]{
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  display: inline-block !important;
  width: 1rem; height: 1rem;
  margin: 0 !important;
  vertical-align: middle !important;
  position: static !important;
  opacity: 1 !important;
  accent-color: #0ea5e9; /* 讓顏色更清楚，可移除 */
}
/* 讓 Modal 以圖片為中心顯示，且不超出視窗 */
#imageModal .modal-body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;                 /* 去掉空白，讓圖片最大化 */
  background:#000;           /* 看大圖更舒服，可留白就拿掉 */
}

/* 圖片不被拉伸，最大寬高受視窗限制 */
#imageModal #modalImage{
  display:block;
  margin:auto;
  max-width: 100%;
  max-height: calc(100vh - 7rem); /* 扣掉 footer/邊距，視需要調整 */
  object-fit: contain;            /* 保持比例 */
}

/* 讓 caption 置中、留點透氣 */
#imageModal .modal-footer{
  justify-content: center;
}
#imageModal #modalCaption{
  text-align:center;
}