/*
 * 主題切換（淺色/深色）— Trioforce Portal
 * 提供 黑白(淺色) / 白黑(深色) 切換選項
 */

/* ── 淺色主題（預設）──── */
:root,
[data-theme="light"] {
    --theme-bg-page: #f4f2ef;
    --theme-bg-content: #fff;
    --theme-bg-card: #fff;
    --theme-bg-elevated: #f8f7f5;
    --theme-text: #222;
    --theme-text-muted: #555;
    --theme-text-secondary: #1a1a1a;
    --theme-border: #e5e3df;
    --theme-border-light: #ebe9e5;
    --theme-link: #007bff;
    --theme-hover-bg: #eef6ff;
    --theme-row-even: #fafaf9;
    --theme-row-odd: #fff;
}

/* ── 深色主題 ──── */
[data-theme="dark"] {
    --theme-bg-page: #1a1a1a;
    --theme-bg-content: #2d2d2d;
    --theme-bg-card: #2d2d2d;
    --theme-bg-elevated: #3a3a3a;
    --theme-text: #e8e8e8;
    --theme-text-muted: #b0b0b0;
    --theme-text-secondary: #d0d0d0;
    --theme-border: #555;
    --theme-border-light: #444;
    --theme-link: #6eb3f7;
    --theme-hover-bg: #3d4a5c;
    --theme-row-even: #333;
    --theme-row-odd: #2d2d2d;
}

/* 套用至 body ──── */
body {
    background: var(--theme-bg-page) !important;
    color: var(--theme-text) !important;
    transition: background 0.25s, color 0.25s;
}

/* 套用至常用容器 ──── */
.container,
.theme-aware,
.theme-card,
.main-content,
.video-sidebar {
    background: var(--theme-bg-content) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

/* 表格 ──── */
[data-theme="dark"] thead { background: var(--theme-bg-elevated) !important; }
[data-theme="dark"] th { color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
[data-theme="dark"] td { color: var(--theme-text-secondary) !important; border-color: var(--theme-border-light) !important; }
/* 負數紅字（數量結算<0）：需覆蓋 td 預設色 */
[data-theme="dark"] td.neg,
[data-theme="dark"] td.neg-num,
[data-theme="dark"] .neg,
[data-theme="dark"] .neg-num { color: #f87171 !important; }
[data-theme="dark"] tbody tr:nth-child(even) { background: var(--theme-row-even) !important; }
[data-theme="dark"] tbody tr:nth-child(odd) { background: var(--theme-row-odd) !important; }
[data-theme="dark"] tbody tr:hover { background: var(--theme-hover-bg) !important; }
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-wrap { border-color: var(--theme-border) !important; }

/* 連結與按鈕 ──── */
[data-theme="dark"] .back-link,
[data-theme="dark"] a.back-link { color: var(--theme-link) !important; }
[data-theme="dark"] .info-bar { background: var(--theme-bg-elevated) !important; color: var(--theme-text-muted) !important; }
[data-theme="dark"] .sync-status-bar { background: var(--theme-bg-elevated) !important; border-color: var(--theme-border) !important; }
[data-theme="dark"] .sync-actions button,
[data-theme="dark"] .sync-actions .header-link-btn { background: var(--theme-bg-content) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; }
[data-theme="dark"] .sync-actions button:hover:not(:disabled) { border-color: #888 !important; background: var(--theme-hover-bg) !important; }

/* 主題切換按鈕 ──── */
/* 預設：獨立固定（非 float-controls 環境，如其他頁面）*/
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9998;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--theme-border);
    background: var(--theme-bg-content);
    color: var(--theme-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}
.theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.theme-toggle:focus { outline: none; }

/* 在 float-controls 群組內時覆寫為 inline */
.float-controls .theme-toggle {
    position: static !important;
    top: auto !important; right: auto !important;
    width: 36px !important; height: 36px !important;
    border: none !important; background: transparent !important;
    box-shadow: none !important; z-index: auto !important;
    font-size: 18px;
}
.float-controls .theme-toggle:hover {
    background: var(--theme-hover-bg) !important;
    transform: scale(1.1) !important;
    box-shadow: none !important;
}

/* ── 首頁 index.php 專用 ──── */
[data-theme="dark"] .top-nav { background: var(--theme-bg-elevated) !important; border-color: var(--theme-border) !important; }
[data-theme="dark"] .nav-logo,
[data-theme="dark"] .username,
[data-theme="dark"] .nav-links a { color: var(--theme-text) !important; }
html[data-theme="dark"] .main-content {
    background: var(--theme-bg-content) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .video-sidebar {
    background: var(--theme-bg-content) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .video-placeholder {
    background: var(--theme-bg-elevated) !important;
    color: var(--theme-text-muted) !important;
}
html[data-theme="dark"] .video-list-item {
    background: var(--theme-bg-elevated) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .video-list-item:hover {
    background: var(--theme-hover-bg) !important;
}
html[data-theme="dark"] .video-list-item.active {
    background: var(--theme-hover-bg) !important;
}
html[data-theme="dark"] .video-input {
    background: var(--theme-bg-elevated) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .video-list-item-name,
html[data-theme="dark"] .video-list-item-meta,
html[data-theme="dark"] .youtube-bookmark-title { color: var(--theme-text) !important; }
[data-theme="dark"] .video-sidebar h3 { color: var(--theme-text) !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .section-card { background: var(--theme-bg-card) !important; }
[data-theme="dark"] .section-title { color: var(--theme-text) !important; }

/* 下拉選單對比修正 */
[data-theme="dark"] .nav-dropdown-panel {
    background: var(--theme-bg-content) !important;
    border: 1px solid var(--theme-border) !important;
}
[data-theme="dark"] .nav-dropdown-title {
    color: var(--theme-text) !important;
    border-bottom-color: var(--theme-border) !important;
}
[data-theme="dark"] .nav-dropdown-col {
    border-right-color: var(--theme-border) !important;
}
[data-theme="dark"] .nav-dropdown-col a {
    color: var(--theme-link) !important;
}
[data-theme="dark"] .nav-dropdown-col a:hover {
    color: #8ec4f8 !important;
}

/* ── 主內容區（視窗內）深色背景（使用 html 提高優先級壓過 body.theme-*）──── */
html[data-theme="dark"] .header {
    background: var(--theme-bg-content) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .header h1,
html[data-theme="dark"] .header .subtitle { color: var(--theme-text) !important; }
html[data-theme="dark"] .header .tagline { color: var(--theme-text-muted) !important; }

/* 銷售流程稽核、商品資訊：深色模式標題與描述對比修正 */
[data-theme="dark"] .page-header h1 { color: var(--theme-text) !important; }
[data-theme="dark"] .page-header .subtitle { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .page-header { border-bottom-color: var(--theme-border) !important; }
[data-theme="dark"] .summary-card .label { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .summary-card .value { color: var(--theme-text) !important; }
[data-theme="dark"] .summary-card { border-color: var(--theme-border) !important; }
[data-theme="dark"] .summary-card.warn { background: rgba(220,53,69,0.15) !important; border-color: #e07a7a !important; }
[data-theme="dark"] .summary-card.warn .value { color: #f1aeb5 !important; }
[data-theme="dark"] .search-bar label { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .search-bar label.filter-label { color: var(--theme-text-muted) !important; }
/* 商品資訊：深色模式 status badge 對比 */
[data-theme="dark"] .status-badge { background: var(--theme-bg-elevated) !important; border-color: var(--theme-border) !important; color: var(--theme-text-muted) !important; }
[data-theme="dark"] .status-badge.status-正常 { background: rgba(25,135,84,0.35) !important; border-color: #4ade80 !important; color: #86efac !important; }
[data-theme="dark"] .status-badge.status-呆滯 { background: rgba(220,53,69,0.35) !important; border-color: #f87171 !important; color: #fca5a5 !important; }
[data-theme="dark"] .status-badge.status-過量,
[data-theme="dark"] .status-badge.status-警示 { background: rgba(13,110,253,0.35) !important; border-color: #60a5fa !important; color: #93c5fd !important; }
[data-theme="dark"] .status-badge.status-停用 { background: rgba(100,100,100,0.35) !important; border-color: #888 !important; color: #bbb !important; }

html[data-theme="dark"] .container {
    background: var(--theme-bg-page) !important;
}

/* 首頁左側：連接網站 / LED 新聞（壓過 body.theme-*）──── */
html[data-theme="dark"] .portal-sidebar,
html[data-theme="dark"] .portal-sidebar-header {
    background: var(--theme-bg-content) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .portal-sidebar-header label,
html[data-theme="dark"] .portal-toggle-btn { color: var(--theme-text) !important; }
html[data-theme="dark"] .portal-toggle-btn:hover { color: var(--theme-link) !important; }

/* 首頁主內容卡片：沛能快訊、法則快訊 ──── */
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .led-news-card,
html[data-theme="dark"] .compact-status-card,
html[data-theme="dark"] .database-list {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .status-card h2,
html[data-theme="dark"] .led-news-header h2,
html[data-theme="dark"] .compact-status-card h2,
html[data-theme="dark"] .database-list h2 { color: var(--theme-text) !important; border-bottom-color: var(--theme-border) !important; }
html[data-theme="dark"] .status-label,
html[data-theme="dark"] .status-value,
html[data-theme="dark"] .led-news-meta,
html[data-theme="dark"] .led-news-source,
html[data-theme="dark"] .led-news-time,
html[data-theme="dark"] .led-news-count,
html[data-theme="dark"] .led-news-filter-info,
html[data-theme="dark"] .portal-news-muted { color: var(--theme-text-muted) !important; }

html[data-theme="dark"] .led-news-item {
    background: var(--theme-bg-elevated) !important;
    border-left-color: var(--theme-link) !important;
}
html[data-theme="dark"] .led-news-item:hover {
    background: var(--theme-hover-bg) !important;
}
html[data-theme="dark"] .led-news-item a { color: var(--theme-link) !important; }
html[data-theme="dark"] .led-news-item a:hover { color: #8ec4f8 !important; }
html[data-theme="dark"] .led-news-loading,
html[data-theme="dark"] .led-news-empty { color: var(--theme-text-muted) !important; }

/* LED 新聞搜尋、右側影片區表頭 ──── */
html[data-theme="dark"] .led-news-search input,
html[data-theme="dark"] #ledNewsSection .led-news-search input {
    background: var(--theme-bg-elevated) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
html[data-theme="dark"] .video-sidebar h3 { color: var(--theme-text) !important; border-bottom-color: var(--theme-border) !important; }

/* 首頁按鈕：深色模式改為暗金色，減少白底感 ──── */
html[data-theme="dark"] .portal-btn,
html[data-theme="dark"] .mysql-admin-btn,
html[data-theme="dark"] .led-news-refresh,
html[data-theme="dark"] .video-btn,
html[data-theme="dark"] .portal-mini-btn,
html[data-theme="dark"] .led-news-search button {
    background: #b45309 !important;
    color: #fff !important;
    border-color: #8b6914 !important;
}
html[data-theme="dark"] .portal-btn:hover,
html[data-theme="dark"] .mysql-admin-btn:hover,
html[data-theme="dark"] .led-news-refresh:hover,
html[data-theme="dark"] .video-btn:hover,
html[data-theme="dark"] .portal-mini-btn:hover,
html[data-theme="dark"] .led-news-search button:hover {
    background: #d97706 !important;
    color: #fff !important;
}

html[data-theme="dark"] .footer {
    background: var(--theme-bg-content) !important;
    border-top-color: var(--theme-border) !important;
    color: var(--theme-text-muted) !important;
}
html[data-theme="dark"] .footer p { color: var(--theme-text-muted) !important; }
html[data-theme="dark"] .footer .refresh-btn { background: #b8860b !important; color: #fff !important; }
html[data-theme="dark"] .footer .refresh-btn:hover { background: #c9a227 !important; }

html[data-theme="dark"] .stat-box {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .online-counter {
    background: var(--theme-bg-elevated) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

/* LED / 沛能 / 法則 新聞內容區 ──── */
html[data-theme="dark"] #ledNewsSection .led-news-item,
html[data-theme="dark"] #peinNewsContent .led-news-item,
html[data-theme="dark"] #standardsNewsContent .led-news-item {
    background: var(--theme-bg-elevated) !important;
    border-left-color: var(--theme-link) !important;
}
html[data-theme="dark"] #ledNewsSection .led-news-item a,
html[data-theme="dark"] #peinNewsContent .led-news-item a,
html[data-theme="dark"] #standardsNewsContent .led-news-item a { color: var(--theme-link) !important; }
html[data-theme="dark"] #ledNewsContent li,
html[data-theme="dark"] #peinNewsContent li,
html[data-theme="dark"] #standardsNewsContent li { border-bottom-color: var(--theme-border-light) !important; }
html[data-theme="dark"] #ledNewsContent,
html[data-theme="dark"] #peinNewsContent,
html[data-theme="dark"] #standardsNewsContent { background: transparent !important; }
html[data-theme="dark"] #ledNewsContent a,
html[data-theme="dark"] #peinNewsContent a,
html[data-theme="dark"] #standardsNewsContent a { color: var(--theme-link) !important; }

html[data-theme="dark"] .portal-section,
html[data-theme="dark"] .portal-section-title h4 { color: var(--theme-text) !important; }
html[data-theme="dark"] .portal-section { border-top-color: var(--theme-border) !important; }
html[data-theme="dark"] #standardsNewsSource,
html[data-theme="dark"] select#standardsNewsSource { background: var(--theme-bg-elevated) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; }

/* 左側 LED 新聞區塊容器、勞工權利快訊列表 ──── */
html[data-theme="dark"] #ledNewsSection {
    background: var(--theme-bg-content) !important;
    border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .led-news-list { background: transparent !important; }
html[data-theme="dark"] .portal-news-item {
    background: var(--theme-bg-elevated) !important;
    border-left-color: var(--theme-link) !important;
}
html[data-theme="dark"] .portal-news-item:hover {
    background: var(--theme-hover-bg) !important;
}
html[data-theme="dark"] .portal-news-item a { color: var(--theme-link) !important; }
html[data-theme="dark"] .portal-news-item a:hover { color: #8ec4f8 !important; }
html[data-theme="dark"] .portal-news-meta { color: var(--theme-text-muted) !important; }

/* ── 快速入口：:link 與 :visited 必須獨立分開，不可同組，瀏覽器才會套用 ── */
html[data-theme="dark"] a.quick-btn:link    { color: #d4d4d8; }
html[data-theme="dark"] a.quick-btn:visited { color: #d4d4d8; }

/* ═══════════════════════════════════════════════════════════
   BOM 成本計算頁面 Dark Mode
   bom_cost_list / bom_cost_edit / bom_cost_price_lib / bom_cost_settings
   ═══════════════════════════════════════════════════════════ */

/* Card containers */
[data-theme="dark"] .table-card,
[data-theme="dark"] .config-card,
[data-theme="dark"] .bom-card,
[data-theme="dark"] .totals-bar,
[data-theme="dark"] .add-form-card { background: var(--theme-bg-content) !important; border-color: var(--theme-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,.3) !important; }
[data-theme="dark"] .stat-pill { background: var(--theme-bg-content) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; }
[data-theme="dark"] .search-bar { background: var(--theme-bg-content) !important; border-color: var(--theme-border) !important; }
[data-theme="dark"] .modal { background: var(--theme-bg-content) !important; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.6) !important; }

/* Form controls */
[data-theme="dark"] .search-bar input,
[data-theme="dark"] .search-bar select,
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] select.price-sel,
[data-theme="dark"] select.fee-sel { background: var(--theme-bg-elevated) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; }
[data-theme="dark"] input.ovr-price { background: #2a2010 !important; border-color: #92400e !important; color: #fcd34d !important; }
/* 原生 <option> 在暗色模式一定要自己給背景色。
   select 本體上面設的 background 不會傳到「展開後的選單」，但 color 會繼承 ——
   結果是淺灰字印在系統預設的白底上，幾乎看不見（Firefox 與部分 Chrome 版本）。
   全站原本沒有任何原生 option 規則，所以這是純補漏、不會蓋掉既有樣式。 */
[data-theme="dark"] select option { background: var(--theme-bg-elevated) !important; color: var(--theme-text) !important; }
[data-theme="dark"] select option:checked { background: var(--theme-hover-bg) !important; color: #fff !important; }
[data-theme="dark"] select option:disabled { color: var(--theme-text-muted) !important; }
[data-theme="dark"] select optgroup { background: var(--theme-bg-content) !important; color: var(--theme-text-muted) !important; }

/* Buttons */
[data-theme="dark"] .btn-secondary { background: var(--theme-bg-elevated) !important; color: var(--theme-text) !important; }
[data-theme="dark"] .btn-secondary:hover { background: var(--theme-hover-bg) !important; }
[data-theme="dark"] .btn-import { background: #052e16 !important; color: #4ade80 !important; border-color: #166534 !important; }
[data-theme="dark"] .btn-danger { background: #450a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; }
[data-theme="dark"] .btn-danger:hover { background: #5a0f0f !important; }

/* Pagination */
[data-theme="dark"] .pagination a { background: var(--theme-bg-content) !important; border-color: var(--theme-border) !important; color: var(--theme-link) !important; }
[data-theme="dark"] .pagination a:hover { background: var(--theme-hover-bg) !important; }
[data-theme="dark"] .pagination .cur { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
[data-theme="dark"] .pagination span { border-color: var(--theme-border) !important; color: var(--theme-text-muted) !important; }

/* Status badges */
[data-theme="dark"] .badge-draft     { background: #451a03 !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-finalized { background: #052e16 !important; color: #4ade80 !important; }
[data-theme="dark"] .badge-latest    { background: #052e16 !important; color: #4ade80 !important; }
[data-theme="dark"] .badge-ragic     { background: #1e3a5f !important; color: #60a5fa !important; }
[data-theme="dark"] .badge-manual    { background: #451a03 !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-semi      { background: #451a03 !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-mat       { background: #1e3a5f !important; color: #60a5fa !important; }
[data-theme="dark"] .badge-cs        { background: #1e1b4b !important; color: #a5b4fc !important; }
[data-theme="dark"] .badge-usd       { color: #60a5fa !important; }
[data-theme="dark"] .badge-cny       { color: #fcd34d !important; }

/* Cost totals */
[data-theme="dark"] .total-twd,
[data-theme="dark"] .cell-total { color: #4ade80 !important; }
[data-theme="dark"] .total-item strong { color: #4ade80 !important; }
[data-theme="dark"] .total-item { color: var(--theme-text) !important; }
[data-theme="dark"] .total-label { color: var(--theme-text-muted) !important; }

/* Messages / alerts */
[data-theme="dark"] .msg-success  { background: #052e16 !important; color: #4ade80 !important; border-color: #166534 !important; }
[data-theme="dark"] .msg-error    { background: #450a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; }
[data-theme="dark"] .alert-success { background: #052e16 !important; color: #4ade80 !important; border-color: #166534 !important; }
[data-theme="dark"] .alert-error   { background: #450a0a !important; color: #f87171 !important; border-color: #7f1d1d !important; }

/* BOM table row types (bom_cost_edit) */
[data-theme="dark"] table.bom-tbl tbody tr.row-semi       { background: #2d2510 !important; }
[data-theme="dark"] table.bom-tbl tbody tr.row-semi:hover { background: #3d3218 !important; }
[data-theme="dark"] table.bom-tbl tbody tr.row-cs         { background: #1a2040 !important; }
[data-theme="dark"] table.bom-tbl tbody tr.row-cs:hover   { background: #222d52 !important; }

/* Price library: latest row highlight */
[data-theme="dark"] tbody tr.is-latest { background: #052e16 !important; }
[data-theme="dark"] tbody tr.is-latest:hover { background: #073d1c !important; }

/* FX rate badges (bom_cost_settings) */
[data-theme="dark"] .rate-badge         { background: #1e3a5f !important; border-color: #2563eb !important; }
[data-theme="dark"] .rate-badge .value  { color: #60a5fa !important; }
[data-theme="dark"] .rate-badge .label,
[data-theme="dark"] .rate-badge .date   { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .rate-badge.no-data { background: var(--theme-bg-elevated) !important; border-color: var(--theme-border) !important; }
[data-theme="dark"] .rate-badge.no-data .value { color: var(--theme-text-muted) !important; font-size: 1rem; }

/* Settings tabs */
[data-theme="dark"] .tab-bar                       { border-color: var(--theme-border) !important; }
[data-theme="dark"] .tab-btn                       { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .tab-btn.active                { color: #60a5fa !important; border-bottom-color: #60a5fa !important; }
[data-theme="dark"] .tab-btn:hover:not(.active)    { color: var(--theme-text) !important; }
[data-theme="dark"] .card-title                    { color: var(--theme-text) !important; }

/* Misc */
[data-theme="dark"] .empty-hint,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .loading   { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .section-title { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .cell-sub  { color: var(--theme-text-muted) !important; }

/* bom_cost_edit: currency column classes (replaces inline style) */
[data-theme="dark"] .cur-usd { color: #60a5fa !important; }
[data-theme="dark"] .cur-cny { color: #fcd34d !important; }
[data-theme="dark"] .cur-twd { color: var(--theme-text) !important; }

/* bom_cost_edit: form field labels */
[data-theme="dark"] .fg label { color: var(--theme-text-muted) !important; }

/* bom_cost_edit: table header cells — local CSS is more specific than generic "thead" rule */
[data-theme="dark"] table.bom-tbl thead th {
    background: var(--theme-bg-elevated) !important;
    color: var(--theme-text) !important;
    border-bottom-color: var(--theme-border) !important;
}
[data-theme="dark"] table.bom-tbl tbody td { border-bottom-color: var(--theme-border-light) !important; }
[data-theme="dark"] table.bom-tbl tbody tr:hover { background: var(--theme-hover-bg) !important; }

/* bom_cost_edit: inline-style spans converted to classes */
[data-theme="dark"] .cs-price-label { color: #a5b4fc !important; }
[data-theme="dark"] .no-price-label,
[data-theme="dark"] .no-fee-label   { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .cell-idx       { color: var(--theme-text-muted) !important; }

/* bom_cost_edit: code elements (material code) */
[data-theme="dark"] table.bom-tbl code { color: var(--theme-text-muted) !important; }

/* bom_cost_edit: 採購欄 badge */
[data-theme="dark"] .purchase-pein  { background: #1e3a5f !important; color: #60a5fa !important; }
[data-theme="dark"] .purchase-cs    { background: #1e1b4b !important; color: #a5b4fc !important; }
[data-theme="dark"] .purchase-alt   { background: #451a03 !important; color: #fbbf24 !important; }
[data-theme="dark"] .purchase-other { background: var(--theme-bg-elevated) !important; color: var(--theme-text-muted) !important; }

/* bom_cost_edit: 採購參考欄 */
[data-theme="dark"] .pur-vendor { color: var(--theme-text) !important; }
[data-theme="dark"] .pur-price  { color: #4ade80 !important; }
[data-theme="dark"] .pur-date   { color: var(--theme-text-muted) !important; }
[data-theme="dark"] .no-pur     { color: var(--theme-border) !important; }