/* =========================================================
   inner-light.css — 內頁淺色化覆蓋層
   ---------------------------------------------------------
   內頁（news / wr 等模組頁）的版型完全沿用骨架範本 btp_rwd_5_c_a_v19
   的 custom.css + article.css + article-orient.css。那三支是「TITAN TECH
   深藍太空色系」，本檔負責把它們改成 c_b 首頁的淺色系（米白底 + 橄欖綠強調色）。

   ⚠ 維護原則：**不要去改 custom.css / article.css / article-orient.css**，
      顏色一律在本檔覆蓋。這三支保持與 c_a_v19 一字不差，日後 c_a 更新版型
      可直接覆蓋複製，不必重做淺色化。

   載入順序（見 theme.tpl，僅內頁載入）：
     bootstrap → bootstrap-icons → xoops → custom → article → article-orient
     → style.css（c_b header/footer，壓過 c_a 的元素選擇器）
     → inner-light.css（本檔，最後覆蓋顏色）

   色票對應（c_a 深藍 → c_b 淺色）：
     --bg        #0A1628 → #f2f2ec  米白（同 c_b 首頁 body）
     --bg-2      #0E1D33 → #ffffff  卡片白
     --fg-1      #E8EEF7 → #141414  主文字
     --fg-2      #7E8FA8 → #5f6b6f  次要文字
     --fg-3      #3A4A63 → #a8a49a  最弱（disabled / 裝飾）
     --border    #2A3A55 → #e2e0d6
     --accent    #4DB8FF → #77835c  橄欖綠（同 c_b 首頁）
   ========================================================= */

/* ---------- 1. 設計 token 換色 ----------
   custom.css / article.css 絕大多數顏色都走 var(--token)，換掉 token 即整體淺色化。 */
:root {
  --bg:        #f2f2ec;
  --bg-2:      #ffffff;

  --fg-1:      #141414;
  --fg-2:      #5f6b6f;
  --fg-3:      #a8a49a;

  --border:        #e2e0d6;
  --border-strong: #c9c5b4;

  --accent:       #77835c;
  --accent-press: #5f6b4a;

  --overlay-scrim: rgba(20,20,20,0.35);
  --overlay-menu:  rgba(242,242,236,0.97);

  /* c_a 原設 --nav-h:72px，但 c_b 的 header 較高（padding 26px + 內容），實測約 104px。
     c_a 的版型用 calc(var(--nav-h) + N) 來避開 fixed header，故一併校正。 */
  --nav-h: 104px;
}

/* ---------- 1-1. 內容區的 accent ----------
   全站強調色已於 2026-07-15 統一為橄欖綠 #77835c（原為金棕 #8a6d47）。
   此處在 `.df-inner`（模組內容區 <main>）明確宣告一次，讓內容區不必依賴 body
   `.sc-root-div-1` 的宣告 —— 那條是為首頁元件設的，掛在 body 上（權重贏過上面的 :root）。
   兩者現在同值，故本區塊實際上不改變任何顏色，但保留可讓「內容區用什麼 accent」一目了然，
   日後若要讓內頁走與首頁不同的強調色，改這裡即可。

   ⚠️ 若日後真要讓內頁 accent 與首頁不同，**只能掛在 `.df-inner`，不可掛在 body**：
      footer 的社群圖示 hover 是用 `var(--accent)` 上色，掛 body 會連內頁 footer 一起變色，
      與首頁不一致。掛 .df-inner 則 header/footer 仍沿用 body 的 --accent（同首頁）。 */
.df-inner {
  --accent:       #77835c;
  --accent-press: #5f6b4a;
}

/* ---------- 1-2. 內頁的 header ----------
   c_b 的 header 是「透明底 + 白字」，因為首頁第一屏是深色 hero 大圖。內頁背景是米白，
   白字會消失，故內頁的 header 直接給深色實底（body 的 .df-inner-page 由 theme.tpl 在
   有模組內容時輸出）。 */
.df-inner-page .sc-top-header-2 {
  background: #141414;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- 1-3. 還原 header / footer 的連結顏色 ----------
   ⚠️ 這是內頁載入 custom.css 後最容易被忽略的副作用：
   custom.css 有三條**全域**連結規則（約 1885~1887 行）：
       a, a:link  { color: var(--accent); }
       a:visited  { color: var(--accent); }
       a:hover,a:focus { color: var(--accent-press); }
   `a:link` 的權重是 (0,1,1)，**比佈景 header/footer 那些 class 規則 (0,1,0) 還高**，
   所以就算 style.css 後載也蓋不掉 —— 內頁的選單、footer 連結、footer logo(SVG 用
   currentColor) 全被染成強調色，與首頁不一致。

   修法：用 `.df-inner-page` 前綴把顏色照 style.css 的原值重寫一次，權重升到 (0,2,0)／
   (0,2,1)，穩定勝過 (0,1,1)。**值必須與 style.css 中同名 class 保持一致**，
   日後改了 header/footer 的連結配色，這裡要同步。 */

/* header：桌機選單 / 下拉 / 語言選單 / logo */
.df-inner-page .sc-header-a-4,
.df-inner-page .sc-navitem-a-7 { color: #fff; }
.df-inner-page .df-ddlink,
.df-inner-page .df-langopt { color: #d7dbe2; }
.df-inner-page .df-ddlink:hover,
.df-inner-page .df-langopt:hover,
.df-inner-page .df-langopt[data-active="1"] { color: #fff; }

/* header：手機選單三層 + 手機語言選單 */
.df-inner-page .sc-mobrow-a-32 { color: #fff; }
.df-inner-page .sc-mobnav-a-38 { color: rgba(255,255,255,.7); }
.df-inner-page .sc-mobrow-a-64 { color: rgba(255,255,255,.82); }
.df-inner-page .sc-root-a-70   { color: rgba(255,255,255,.6); }
.df-inner-page .df-langopt-m   { color: rgba(255,255,255,.7); }
.df-inner-page .df-langopt-m[data-active="1"] { color: #fff; }

/* footer：品牌 logo 連結（內嵌 SVG 以 currentColor 上色，故需還原成 inherit） */
.df-inner-page .sc-foot-cols-div-300 { color: inherit; }

/* footer：社群圓鈕 / 選單連結 / 公司資訊 / Get In Touch 按鈕 / 底部列 */
.df-inner-page .df-social,
.df-inner-page .df-foot-link,
.df-inner-page .df-contact-link { color: rgba(255,255,255,.75); }
.df-inner-page .df-social:hover,
.df-inner-page .df-foot-link:hover,
.df-inner-page .df-contact-link:hover { color: #fff; }
.df-inner-page .df-discover-btn,
.df-inner-page .df-discover-btn:hover { color: #fff; }
.df-inner-page .sc-footer-a-315,
.df-inner-page .sc-footer-a-316 { color: rgba(255,255,255,.7); }

/* ---------- 2. 封面圖上的疊字區：維持深色 ----------
   文章封面(.article-hero) 與橫幅封面(.na-hero) 是「大圖 + 深色漸層遮罩 + 疊字」。
   遮罩本來就是為了讓圖上的字看得清楚，屬於圖片處理、不是「暗色系版面」，故保留。
   但 token 改淺後疊字會變深色而消失在圖上 —— 這裡用「區域內重新宣告變數」把
   該範圍的文字色改回白系（CSS 變數會沿 DOM 繼承，只影響此容器內部）。 */
.article-hero:not(.no-cover),
.na-hero {
  background-color: #141414;   /* 圖片載入前的底色，改用 c_b 的深色 */
  --fg-1:   #ffffff;
  --fg-2:   rgba(255,255,255,0.72);
  --fg-3:   rgba(255,255,255,0.45);
  --border: rgba(255,255,255,0.28);
}

/* 無封面圖的文章標頭：透明底 + 深色字（token 已處理，此處僅確保不被上面波及） */
.article-hero.no-cover {
  background: transparent;
}

/* ---------- 3. 寫死深色的背景 → 淺色 ---------- */
.pager-thumb,            /* 上/下篇縮圖的墊底色 */
.news-thumbnail {        /* 消息縮圖墊底色 */
  background: #e9e7dd;
}

/* 直式/方形圖的圖框（背後是模糊放大的同一張圖，墊底色只在圖載入前可見） */
.na-frame {
  background: #e9e7dd;
}

/* ---------- 4. accent 底上的文字：深色 → 白色 ----------
   c_a 的 accent 是亮藍(#4DB8FF)，配深色字；c_b 的 accent 是橄欖綠(#77835c)，
   屬中深色，必須改配白字才有足夠對比。 */
.tag-live,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn-dark,
.btn-primary,
.btn-warning,
#tabNavigation .selectedTab a:hover,
.products-viewall:focus,
.mobile-products-viewall:focus {
  color: #ffffff !important;
}
/* .btn-primary／.btn-warning：custom.css 把文字寫死深藍 #051121（為 c_a 亮藍設計），
   c_b accent 是橄欖綠（中深色）須配白字。base 的 --bs-btn-color 與直接 color 一併覆蓋。 */
.btn-primary,
.btn-warning {
  --bs-btn-color:       #ffffff !important;
  --bs-btn-hover-color: #ffffff !important;
}

/* ---------- 5. 表單下拉選單：全站暗色化 → 淺色 ----------
   custom.css 2887~2926 用「寫死深藍 hex + !important」把全站原生 <select>／<option>／
   <optgroup> 暗色化（深藍底 #0E1D33 + 亮字 #E8EEF7），因非 var() 故 :root 換色蓋不到。
   此處照樣用寫死 hex 覆蓋回淺色，確保原生 popup 渲染層也生效。 */
:root { color-scheme: light; }                 /* 原生下拉／捲軸走淺色渲染 */

/* XOOPS 原生裸 <select>（custom.css 以 appearance:none + 深藍底 + 藍箭頭接管） */
select:not(.form-select):not(.news-select) {
  background-color: #ffffff !important;
  color:            #141414 !important;
  border:           1px solid #e2e0d6 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6b6f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* 全站下拉選項清單（含 Bootstrap .form-select、liaise 的下拉，其 option 亦被 custom.css 染深） */
option {
  background-color: #ffffff !important;
  color:            #141414 !important;
}
optgroup {
  background-color: #f2f2ec !important;
  color:            #5f6b6f !important;
}
optgroup option {
  background-color: #ffffff !important;
  color:            #141414 !important;
}
/* 選中項：藍底 → 橄欖綠（沿用既有值，須排在 option 覆蓋之後才不被上面壓過） */
option:checked {
  background-color: rgba(119,131,92, 0.22) !important;
  color:            #77835c !important;
}

/* ---------- 5-2. XOOPS 系統 UI（表格 / 訊息框 / blockquote / code） ----------
   custom.css 把 XOOPS 內建元件（system 的登入、註冊、會員資料；pm 站內信；各模組的
   表格與訊息框）全設成深藍半透明底，在米白內頁上會變成一條條看不清字的灰藍橫幅。
   這裡整組改成淺色。選擇器與 custom.css 相同、靠載入順序在後而勝出（部分原規則帶
   !important，故此處也必須加）。 */
blockquote {
  background-color: #faf9f4;
}
.outer, .head, .even, .odd {
  background-color: #ffffff !important;
}
tr.even, tr.odd {
  background-color: #faf9f4 !important;
}
tr.even:hover, tr.odd:hover {
  background-color: rgba(119,131,92,0.08) !important;
}
table th, table td {
  background-color: transparent;
}
tr.active > td, tr.active > th {
  background-color: rgba(119,131,92,0.12) !important;
  color: var(--fg-1) !important;
}
#fullSupport,
.confirmMsg, .errorMsg, .resultMsg {
  background-color: #ffffff !important;
  color: var(--fg-1) !important;
}
/* 表格語意色：c_a 是「深底 + 淺字」，淺色頁需反過來（淺底 + 深字） */
td.warning, tr.warning > td { background-color: rgba(148,161,115,0.14) !important; color: #5f6b4a !important; }
td.success, tr.success > td { background-color: rgba(119,131,92,0.16) !important; color: #4c5a3c !important; }
td.info,    tr.info > td    { background-color: rgba(119,131,92,0.10) !important; color: var(--accent) !important; }
td.danger,  tr.danger > td  { background-color: rgba(170,60,60,0.12)  !important; color: #8c2f2f !important; }
/* 行內程式碼：原為「白色半透明」（給深底用），淺底需改成淺灰 */
code, pre, kbd, samp {
  background-color: rgba(20,20,20,0.05);
}
/* 選取反白：亮藍 → 橄欖綠 */
::selection { background: rgba(119,131,92,0.28); color: #141414; }

/* ---------- 5-2b. 表格 Bootstrap 化 + RWD ----------
   針對「class=outer 的表格」與「無 class 的裸表格」。這些多由 XOOPS 核心／模組以 PHP
   產生（拿不到 .table class），故把 Bootstrap 5 的 .table + .table-hover 外觀用 CSS 複製上去。
   有指定 class 的表格（.table、width70… 等）不受此段影響（選擇器只命中 .outer 與無 class）。
   顏色沿用 5-2 段的淺色（框 #e2e0d6、hover 橄欖綠 8%）。 */
table.outer,
table:not([class]) {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  color: #141414;
  vertical-align: top;
}
table.outer th, table.outer td,
table:not([class]) th, table:not([class]) td {
  padding: .5rem .5rem;
  vertical-align: top;
  border-bottom: 1px solid #e2e0d6 !important;   /* .table 的列間橫線 */
}
table.outer th,
table:not([class]) th {
  text-align: left;
  font-weight: 600;
  border-bottom-width: 2px !important;           /* thead 加重（同 .table thead） */
}
table.outer tbody tr:hover > *,
table:not([class]) tbody tr:hover > * {
  background-color: rgba(119,131,92,0.08) !important;   /* .table-hover */
}
/* RWD：窄螢幕欄多時可橫向捲動（等同 .table-responsive，免外層 wrapper）；
   欄少時仍會自動換行填滿。桌機維持正常全幅表格。 */
@media (max-width: 767.98px) {
  table.outer,
  table:not([class]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 5-3. 裸 .hN 的標題字級 ----------
   佈景規範是「不用 <h1>~<h6>，改用 <div class="hN">」。首頁與各模組內頁的標題都另外帶了
   自己的 class（如 .news-card-title、.na-title）來提供字級，但 **XOOPS 內建樣板**（搜尋結果、
   會員資料、站內信、留言）只有一個裸的 `class="h3"` / `class="h4"`，沒有任何字級來源。

   在 style.css 的「Bootstrap 相容防護」把 .h1~.h6 中和成 font-size:inherit 之後，這些裸標題
   會掉成內文大小、看不出是標題。此處補上佈景自己的標題字級。

   ⚠️ 選擇器用 `[class="hN"]`（屬性**精確**匹配）：只命中「class 剛好只有 hN、沒有別的 class」
      的元素。有自己 class 的標題（首頁、news、wr…）完全不受影響，不會被這裡覆蓋。 */
.df-inner [class="h1"],
.df-inner [class="h2"],
.df-inner [class="h3"],
.df-inner [class="h4"],
.df-inner [class="h5"],
.df-inner [class="h6"] {
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .5rem;
  color: var(--fg-1);
}
.df-inner [class="h1"] { font-size: 2rem; }
.df-inner [class="h2"] { font-size: 1.75rem; }
.df-inner [class="h3"] { font-size: 1.55rem; }
.df-inner [class="h4"] { font-size: 1.4rem; }
.df-inner [class="h5"] { font-size: 1.2rem; }
.df-inner [class="h6"] { font-size: 1.05rem; }

/* ---------- 5-4. 登入／編輯 modal：內頁維持深色皮膚（與首頁一致） ----------
   ⚠️ custom.css 用 **ID 選擇器 + !important** 把 modal 改成淺色（`#mymodal_login .modal-content
      { background-color: var(--bg-2) !important }` 等，權重 (1,0,1)），會壓過佈景的
      `.df-modal .modal-content`（權重 0,2,0）。結果內頁 modal 變白底，但佈景的深色皮膚元件
      （白色的關閉鈕 X、白字的「記住登錄資訊」、白色的忘記密碼／註冊連結、白字按鈕）還在，
      形成一堆「白字壓白底」而消失。

   modal 與 header/footer 同屬全站共用元件，兩邊外觀應一致 → 內頁一律覆蓋回深色皮膚。
   選擇器用 `#id.df-modal`（權重 (1,1,0)＋後代 class）以穩定勝過 custom.css 的 (1,0,1)；
   custom.css 該組規則帶 !important，故此處也必須加。 */
#mymodal_login.df-modal .modal-content,
#mymodal_edit.df-modal .modal-content {
  background-color: #141414 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}
#mymodal_login.df-modal .modal-header,
#mymodal_edit.df-modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#mymodal_login.df-modal .modal-title,
#mymodal_login.df-modal .modal-header .h5,
#mymodal_login.df-modal #mymodal_loginLabel,
#mymodal_edit.df-modal .modal-title,
#mymodal_edit.df-modal .modal-header .h5,
#mymodal_edit.df-modal #mymodal_editLabel {
  color: #fff !important;
}
#mymodal_login.df-modal .modal-body,
#mymodal_edit.df-modal .modal-body { background: transparent !important; }
/* 關閉鈕：深底上要用白色 X（invert 把預設的黑 X 反白） */
#mymodal_login.df-modal .btn-close,
#mymodal_edit.df-modal .btn-close { filter: invert(1) grayscale(1) !important; opacity: .7 !important; }
#mymodal_login.df-modal .btn-close:hover,
#mymodal_edit.df-modal .btn-close:hover { opacity: 1 !important; }
/* 輸入框 */
#mymodal_login.df-modal .form-control {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}
#mymodal_login.df-modal .form-control::placeholder { color: rgba(255,255,255,.45) !important; }
#mymodal_login.df-modal .form-control:focus {
  background-color: rgba(255,255,255,.08) !important;
  border-color: #77835c !important;
  box-shadow: none !important;
}
#mymodal_login.df-modal .form-check-label { color: rgba(255,255,255,.75) !important; }
#mymodal_login.df-modal .form-check-input:checked {
  background-color: #77835c !important;
  border-color: #77835c !important;
}
/* 按鈕文字鎖白：編輯／登出鈕是 <a class="btn df-modal-btn">，被 custom.css 全域
   a:link／a:hover（權重 0,1,1、無 !important）染成橄欖綠 → 疊在橄欖綠底上看不見文字。
   （登入鈕是 <button> 不受 a:link 影響，故只有 <a> 型按鈕中招。）
   用 .df-inner-page 前綴 (0,2,0) + !important 一律壓過，恢復白字（含各狀態）。 */
.df-inner-page .df-modal-btn,
.df-inner-page .df-modal-btn:hover,
.df-inner-page .df-modal-btn:focus,
.df-inner-page .df-modal-btn:active,
.df-inner-page .df-modal-btn-ghost,
.df-inner-page .df-modal-btn-ghost:hover,
.df-inner-page .df-modal-btn-ghost:focus,
.df-inner-page .df-modal-btn-ghost:active {
  color: #fff !important;
}

/* ---------- 5-5. header 的搜尋框：還原成無框透明（與首頁一致） ----------
   ⚠️ custom.css 有一條**全域** `input, select, textarea {...!important}`（約 1913 行），給所有
      輸入框加了 `border:1px solid var(--border)` + 底色。它只在內頁載入，於是 header 展開的
      搜尋框（`.df-search-input`，首頁設計是 border:none;background:transparent）被套上一個方框。
   header 是全站共用元件，內頁應與首頁一致 → 把搜尋框還原為無框透明。custom.css 帶 !important，
   故此處也必須加。 */
.df-inner-page .df-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
}
.df-inner-page .df-search-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- 6. 內文連結 ----------
   c_a 的 a:link 已走 var(--accent)，換 token 後自動變橄欖綠；此處僅補 hover 手感。 */
.df-inner a:hover {
  color: var(--accent-press);
}

/* ---------- 7. TinyMCE 對話框標題（.tox-dialog__header / __title） ----------
   custom.css 把標題文字寫死 #E8EEF7（為深底設計的近白色，帶 !important），但 header 背景是
   var(--bg)＝內頁米白 #f2f2ec → 淺字疊淺底看不清。改深色文字（含 header 內任何 h1）。 */
.tox .tox-dialog__header,
.tox .tox-dialog__title,
.tox .tox-dialog__header h1,
.tox .tox-dialog__header .h1 {
  color: #141414 !important;
}