/* jobs.hktv.my — 職位模組夜間模式
   對齊主站 hktv.my 的深色令牌：底 #111827／#0f172a，字 #e5e7eb／#9ca3af，
   主色藍 dark #60a5fa，第二色青 dark #22d3ee
   本檔排在 jobs-shim.css 之後，並用 html.dark 提升特異性 */

/* ---------- 1. 變量 ---------- */
html.dark .jobs-unified,
html.dark .job-drawer-layer,
html.dark .job-detail-drawer,
html.dark .job-detail-content,
html.dark .gov-job-card,
html.dark .job-page-actions {
  --bg: #0f172a;
  --bg-soft: #1f2937;
  --panel: #111827;
  --panel-2: rgba(37, 99, 235, .20);
  --border: #374151;
  --text: #e5e7eb;
  --text-dim: #9ca3af;

  --brand: #60a5fa;
  --brand-2: #93c5fd;
  --brand-soft: rgba(37, 99, 235, .20);
  --brand-line: #1e40af;

  --accent: #22d3ee;
  --accent-2: #67e8f9;
  --accent-soft: rgba(8, 145, 178, .20);
  --accent-line: #155e75;

  --ok: #34d399;
  --err: #f87171;
  --uj-line: rgba(255, 255, 255, .12);

  --ink: #e5e7eb;
  --muted: #9ca3af;
  --salary-ink: #e5e7eb;
  --salary-soft: #1f2937;
  --line: #374151;
  --canvas: #0f172a;
  --white: #111827;

  color-scheme: dark;
}

/* ---------- 2. 白底容器 ---------- */
html.dark .uj-hero,
html.dark .uj-filter,
html.dark .uj-tabs,
html.dark .uj-body,
html.dark .uj-card,
html.dark .uj-cat,
html.dark .uj-category-toggle,
html.dark .uj-sortbox select,
html.dark .uj-filter-fields select,
html.dark .uj-search-row select,
html.dark .job-detail-drawer,
html.dark .job-drawer-footer,
html.dark .job-detail-tabs,
html.dark .gov-jobs-panel,
html.dark .job-page-card,
html.dark .job-page-actions,
html.dark .job-share-sheet,
html.dark .job-share-button,
html.dark .job-share-sheet-close,
html.dark .uj-logo,
html.dark .uj-card .uj-card-logo,
html.dark .job-detail-logo,
html.dark .gov-job-card {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

html.dark .uj-filter { background: rgba(17, 24, 39, .97); }
html.dark .uj-hero { border-top-color: var(--brand); }
html.dark .uj-searchbar { background: var(--bg-soft); }
html.dark .uj-searchbar input { color: var(--text); }
html.dark .uj-searchbar input::placeholder { color: #6b7280; }
html.dark .uj-searchbar .uj-clear { background: #374151; color: var(--text-dim); }
html.dark .uj-searchbar button { background: #2563eb; color: #fff; }
html.dark .uj-searchbar button:hover { background: #1d4ed8; }

/* ---------- 3. 分頁籤／籌碼／徽章 ---------- */
html.dark .uj-tab { color: var(--text-dim); }
html.dark .uj-tab:hover,
html.dark .uj-tab.on,
html.dark .uj-category-toggle.on { background: var(--brand-soft); color: var(--brand-2); border-color: var(--brand-line); }
html.dark .uj-tab-n { background: var(--bg-soft); color: var(--text-dim); }
html.dark .uj-tab.on .uj-tab-n { background: var(--brand-soft); color: var(--brand-2); }
html.dark .uj-badge.uj-gov { background: var(--brand-soft); color: var(--brand-2); border: 0; }
html.dark .uj-badge.uj-priv { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-line); }
html.dark .uj-typechip { background: #1f2937; color: #cbd5e1; }
html.dark .uj-cat .uj-cat-ic { background: var(--brand-soft); color: var(--brand-2); }
html.dark .uj-cat .uj-cat-ic.gold { background: var(--accent-soft); color: var(--accent-2); }
html.dark .uj-cat .uj-cat-ic.red { background: var(--brand-soft); color: var(--brand-2); }
html.dark .uj-cat:hover { border-color: var(--brand-line); }

/* ---------- 4. 正文 ---------- */
html.dark .uj-hero-eyebrow { color: var(--brand); }
html.dark .uj-hero-more { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-line); }
html.dark .uj-note,
html.dark .uj-cat small,
html.dark .uj-sources,
html.dark .uj-org,
html.dark .uj-duties,
html.dark .uj-duty-label,
html.dark .uj-card-bottom .uj-row,
html.dark .uj-card-bottom .uj-salary .uj-per,
html.dark .uj-deadline,
html.dark .job-sync-note { color: var(--text-dim); }
html.dark .uj-row svg,
html.dark .uj-empty svg { color: #6b7280; }
html.dark .uj-salary .uj-amt,
html.dark .uj-card-bottom .uj-salary .uj-amt,
html.dark .gov-job-card .gov-salary-line strong,
html.dark .job-detail-salary strong,
html.dark .moovup-location { color: var(--text); }
html.dark .uj-deadline.soon { color: var(--brand-2); background: var(--brand-soft); }
html.dark .uj-viewlink { color: var(--text-dim); }
html.dark .uj-card:hover .uj-viewlink { color: var(--brand); }
html.dark .uj-card:hover { border-color: var(--brand-line); box-shadow: 0 5px 18px rgba(0, 0, 0, .5); }
html.dark .uj-card.uj-gov::before { background: var(--brand); }
html.dark .uj-card.uj-priv::before { background: var(--accent); }
html.dark .uj-empty b { color: var(--text); }
html.dark .jobs-unified #ujReset,
html.dark .uj-mobile-reset { color: var(--brand); }
html.dark .jobs-talent-shortcut { color: var(--brand); }

/* ---------- 5. 抽屜 ---------- */
html.dark .job-drawer-backdrop { background: rgba(0, 0, 0, .62); }
html.dark .job-detail-drawer { box-shadow: -12px 0 60px rgba(0, 0, 0, .55); }
html.dark .job-drawer-header-title { color: #cbd5e1; }
html.dark .job-drawer-header-title span { border-left-color: var(--border); color: #94a3b8; }
html.dark .job-drawer-close { background: var(--bg-soft); color: #cbd5e1; }
html.dark .job-drawer-close:hover { background: #374151; }
html.dark .job-drawer-body { scrollbar-color: #4b5563 transparent; }
html.dark .job-detail-tabs { box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
html.dark .job-detail-tabs button { color: #94a3b8; }
html.dark .job-detail-tabs button[aria-current="true"] { color: var(--brand); border-color: var(--brand); }
html.dark .job-drawer-loading,
html.dark .job-drawer-error { color: var(--text-dim); }
html.dark .job-drawer-loading i { background: var(--bg-soft); }
html.dark .job-drawer-error h3 { color: var(--text); }
html.dark .job-drawer-error button { background: #2563eb; color: #fff; }

/* ---------- 6. 政府職位卡 ---------- */
html.dark .gov-job-card:hover,
html.dark .gov-job-card.is-active { border-color: var(--brand-line); box-shadow: 0 5px 18px rgba(0, 0, 0, .5); }
html.dark .gov-job-card .gov-department-icon { background: var(--accent-soft); color: var(--accent-2); }
html.dark .gov-job-card .gov-card-department,
html.dark .gov-job-card .gov-card-meta,
html.dark .gov-job-card .gov-card-footer > span:first-child { color: var(--text-dim); }
html.dark .gov-job-card .gov-card-type { background: var(--bg-soft); color: var(--text-dim); border-color: var(--border); }
html.dark .gov-job-card .gov-salary-line { color: var(--text); }
html.dark .gov-job-card .gov-salary-line span { color: var(--text-dim); }
html.dark .gov-job-card .gov-card-action { color: var(--brand); }

/* ---------- 7. 詳情內容 ---------- */
html.dark .job-detail-department,
html.dark .job-detail-meta,
html.dark .job-fact-label,
html.dark .job-summary-label,
html.dark .job-deadline-box .job-summary-label,
html.dark .job-deadline-time,
html.dark .job-detail-salary span,
html.dark .job-detail-source,
html.dark .job-detail-source .job-source-title,
html.dark .job-footer-caption,
html.dark .job-official-link,
html.dark .gov-jobs-heading span,
html.dark .gov-jobs-hero p,
html.dark .gov-jobs-hero aside,
html.dark .gov-jobs-panel .job-sync-note,
html.dark .job-share-row > span:first-child { color: var(--text-dim); }

html.dark .job-detail-meta i { background: var(--accent); }
html.dark .job-detail-list li:before { background: var(--accent); }
html.dark .job-section-title svg { color: var(--accent); }
html.dark .job-detail-badges span { background: var(--accent-soft); color: var(--accent-2); }
html.dark .job-detail-badges .neutral { background: var(--bg-soft); color: var(--text-dim); }
html.dark .job-salary-panel { background: var(--salary-soft); border-color: var(--border); }
html.dark .job-deadline-box { border-left-color: var(--border); }
html.dark .job-deadline-value { color: var(--accent-2); }
html.dark .job-fact-value { color: #cbd5e1; }
html.dark .job-application-highlight { background: var(--bg-soft); color: var(--text-dim); }
html.dark .job-application-highlight svg { color: var(--accent); }
html.dark .job-application-highlight strong { color: var(--text); }
html.dark .job-requirement-key { background: var(--bg-soft); color: var(--text-dim); }
html.dark .job-requirement-text,
html.dark .job-detail-list li,
html.dark .job-full-text,
html.dark .job-step-copy { color: #cbd5e1; }
html.dark .job-source-details { background: var(--bg-soft); border-color: var(--border); color: var(--text-dim); }
html.dark .job-source-details[open] summary { border-bottom-color: var(--border); }
html.dark .job-source-details summary { color: var(--text-dim); }
html.dark .job-source-copy .job-copy-heading,
html.dark .job-step-title { color: var(--text); }
html.dark .job-source-copy .job-full-text { color: #cbd5e1; }
html.dark .job-step-number { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-2); }
html.dark .job-step-link,
html.dark .job-contact-row a,
html.dark .job-detail-source a { color: var(--brand); }
html.dark .job-documents-note { background: var(--bg-soft); border-left-color: var(--accent-line); color: var(--text-dim); }
html.dark .job-contact-card { background: var(--bg-soft); border-color: var(--border); }
html.dark .job-contact-row > span { color: #94a3b8; }
html.dark .job-contact-row > div,
html.dark .job-contact-row > a { color: #cbd5e1; }
html.dark .job-footer-caption strong { color: #cbd5e1; }
html.dark .job-official-link:hover { color: var(--brand); }
html.dark .gov-jobs-filter button { background: #2563eb; color: #fff; }
html.dark .gov-jobs-filter button:hover { background: #1d4ed8; }
html.dark .job-detail-badges span { background: var(--accent-soft); color: var(--accent-2); }
html.dark .job-detail-badges .neutral { background: var(--bg-soft); color: var(--text-dim); }
html.dark .job-footer-caption span:before { color: #6b7280; }
html.dark .gov-jobs-hero .eyebrow,
html.dark .gov-jobs-hero aside > .job-icon { color: var(--accent); }
html.dark .gov-jobs-hero aside strong { color: var(--text); }
html.dark .gov-jobs-filter input,
html.dark .gov-jobs-filter select { background: var(--bg-soft); border-color: var(--border); color: var(--text); }
html.dark .gov-jobs-types a { color: var(--text-dim); }
html.dark .gov-jobs-types a[aria-current="true"] { background: var(--brand-soft); color: var(--brand-2); }

/* ---------- 8. 底部操作與分享 ---------- */
html.dark .job-primary-button { background: #e5e7eb; color: #111827; }
html.dark .job-primary-button:hover { background: #f3f4f6; color: #111827; }
html.dark .job-actions-compact .job-primary-button { background: #e5e7eb !important; color: #111827 !important; border-color: #e5e7eb !important; }
html.dark .job-actions-compact .job-primary-button:hover { background: #f3f4f6 !important; color: #111827 !important; border-color: #f3f4f6 !important; }
html.dark .job-actions-compact .job-copy-button { color: #cbd5e1; }
html.dark .job-share { border-bottom-color: var(--border); }
html.dark .job-share-button { border-color: var(--border) !important; }
html.dark .job-share-button:hover { background: var(--brand-soft); }
html.dark .job-share-status { color: var(--accent-2); }
html.dark .job-share-fallback { color: var(--text-dim); }
html.dark .job-share-fallback input { background: var(--bg-soft); border-color: var(--border); color: var(--text); }
html.dark .job-share-sheet-close { color: #cbd5e1; }
html.dark .job-share-sheet-card h3 { color: var(--text); }
html.dark .job-share-sheet-card > p,
html.dark .job-share-link-label { color: var(--text-dim); }
html.dark .job-share-link-label input { background: var(--bg-soft); border-color: var(--border); color: var(--text); }
html.dark .job-share-sheet-actions .job-share-whatsapp { color: #4ade80; }

/* ---------- 9. moovup ---------- */
html.dark .moovup-eyebrow,
html.dark .moovup-more,
html.dark .moovup-source-link { color: var(--accent-2); }
/* 職位來源篩選 — 夜間 */
html.dark .uj-srcbtn { background: var(--panel); border-color: var(--border); color: var(--text); }
html.dark .uj-srcbtn:hover { border-color: var(--brand-line); color: var(--brand-2); }
html.dark .uj-srcbtn.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-2); }
