/* 後台新版頁面主題：formula1.com Results 頁的深色版（底 #15151e、表格卡片 #000、白字、灰表頭）。
   分析見 doc/frontend-migration/Assets/admin-f1-style-analysis.html。固定深色，不跟隨系統設定。

   逐頁導入：頁面在 style.css、console-page.css、tabulator.min.css 之後加一行
   <link rel="stylesheet" href="../shared/admin-theme.css" /> 就換成新版，並刪掉該頁 inline
   的 Tabulator 覆蓋與 .btn 定義（inline <style> 在 <link> 之後，留著會蓋掉這裡），
   頁面 inline 裡寫死的淺色（徽章、結果訊息）也要改成深底可讀的值。
   全部頁面導入後，:root 這組 token 併回 style.css、本檔其餘規則併入 console-page.css。 */

:root {
  /* 原生控制項（檔案選擇鈕、<select> 展開的選單、捲軸）跟著用深色外觀 */
  color-scheme: dark;

  --bg: #15151e;              /* 頁面底色 */
  --card: #000000;            /* style.css 的卡片 token，對齊表格卡片 */
  --surface: #000000;         /* 表格卡片 */
  --raised: #26262b;          /* hover 列、輸入框 */
  --ink: #ffffff;
  --ink-soft: #aaaaaa;
  --border: #303037;          /* 列線 */
  --border-strong: #606066;   /* 表頭下緣、分頁列下緣 */
  --accent: #d6242a;          /* 與 logo 同色：選中分頁、主要按鈕 */
  --accent-strong: #a81a1f;
  --accent-soft: rgba(214, 36, 42, .16);
  --success: #28973e;
  --danger: #ff2d27;
  --warn: #f5a524;
  /* F1 卡片是 8px 小圓角、不用陰影（靠底色差浮起來）；style.css 的元件都讀這兩個 token */
  --radius: 8px;
  --shadow: none;
  /* style.css 的 *-soft 是淺色實底，深底上改半透明 */
  --success-soft: rgba(40, 151, 62, .16);
  --warn-soft: rgba(245, 165, 36, .14);
  --danger-soft: rgba(255, 45, 39, .14);
  --badge-success-bg: rgba(40, 151, 62, .2);
  --badge-success-ink: #6fdc86;
  --badge-danger-bg: rgba(255, 45, 39, .18);
  --badge-danger-ink: #ff8a86;
  --badge-pending-bg: rgba(245, 165, 36, .18);
  --badge-pending-ink: #ffc46b;
  --badge-leave-bg: rgba(167, 139, 250, .2);
  --badge-leave-ink: #c4b5fd;
  --result-info: #6cb4ff;
  /* Titillium Web 由 app-nav.css 的 @import 載入；只有拉丁字形，標題與分頁裡的英數用它，中文落到後備字型 */
  --display-font: "Titillium Web", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

/* Only pages that opt in through theme.js receive these tokens. */
html[data-app-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --card: #ffffff;
  --surface: #ffffff;
  --raised: rgba(22, 22, 22, .04);
  --ink: #161616;
  --ink-soft: rgba(22, 22, 22, .72);
  --border: rgba(22, 22, 22, .16);
  --border-strong: rgba(22, 22, 22, .52);
  --accent: #da1e28;
  --accent-strong: #a2191f;
  --accent-soft: rgba(218, 30, 40, .08);
  --success: #044317;
  --success-icon: #198038;
  --success-soft: rgba(25, 128, 56, .08);
  --danger: #a2191f;
  --danger-soft: rgba(218, 30, 40, .08);
  --warn: #161616;
  --warn-soft: #fddc69;
  --brand-yellow: #fff200;
  --highlight: var(--brand-yellow);
  --badge-success-bg: var(--success-soft);
  --badge-success-ink: var(--success);
  --badge-danger-bg: var(--danger-soft);
  --badge-danger-ink: var(--danger);
  --badge-pending-bg: var(--warn-soft);
  --badge-pending-ink: var(--ink);
  --badge-leave-bg: var(--warn-soft);
  --badge-leave-ink: var(--ink);
  --result-info: var(--ink);
}

/* ---------- 頁面標題 ---------- */
/* console-page.css 指定了 font-family: sans-serif，會蓋掉 style.css 的中文字型，這裡改回繼承 */
.console-page { font-family: inherit; }
.console-page h1,
.console-page h2,
.view-tab-btn { font-family: var(--display-font); }
.console-page h1 {
  margin: 8px 0 4px;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--ink);
}
.console-page .subtitle { color: var(--ink-soft); font-size: .92rem; }
.console-page h2 {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--border-strong);
}

/* ---------- 頁內分頁 ---------- */
.view-tab-bar { border-bottom: 1px solid var(--border-strong); margin-bottom: 20px; }
.view-tab-btn {
  padding: 8px 18px 6px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-soft);
}
/* 與主導覽（app-nav.css 的 .tab-btn）同一套：hover 白色底線、選中紅色底線，
   .active 寫在 :hover 之後，選中項滑過時維持紅線 */
.view-tab-btn { transition: color .15s, border-color .15s; }
.view-tab-btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
.view-tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- 按鈕 ---------- */
.btn {
  background: var(--accent);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-strong); }
.btn:disabled { background: #4a1c1e; color: #8c6a6b; cursor: not-allowed; }
/* style.css 的 .btn-text 在本檔 .btn 之前、特異性相同，不重寫會被上面的紅底蓋掉。
   文字按鈕與分頁同一套 hover：白字＋白色底線 */
.btn.btn-text {
  background: transparent;
  color: var(--ink-soft);
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.btn.btn-text:hover { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- 輸入框 ---------- */
/* .manual-input 的版面在 style.css（報到台也在用），這裡只換深色外觀 */
.manual-input {
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--ink);
}
.manual-input::placeholder { color: #77777d; }
.manual-input:focus { background: var(--raised); border-color: var(--ink); }

/* ---------- 欄位說明表（shared/field-docs.css） ---------- */
/* field-docs.css 的表頭底色寫死 #f8f9fc，其餘已用 token */
table.field-doc th { background: var(--raised); }

/* ---------- Toast ---------- */
/* style.css 的 toast 是 --ink 底配白字，--ink 在深色主題是白色，要反過來 */
.toast {
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}

/* ---------- Tabulator 表格 ---------- */
/* 黑色卡片浮在深色頁面上，不畫外框；表頭大寫灰字＋粗下緣；列與列只用細線，不用斑馬紋。
   Tabulator 預設主題的灰底、格線、斑馬紋、排序 hover 灰底都要逐一蓋掉。 */
.tabulator {
  background: var(--surface);
  border: none;
  border-radius: 8px;
  font-size: .88rem;
  color: var(--ink);
}
.tabulator .tabulator-header {
  background: var(--surface);
  border-bottom: 2px solid var(--border-strong);
  color: var(--ink-soft);
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--surface);
  border-right: none;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 12px 10px 10px; }
.tabulator .tabulator-header .tabulator-col-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: var(--raised);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--border-strong);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--ink);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--ink);
}

.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
  width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--raised);
  font: inherit;
  font-size: .82rem;
  font-weight: 400;           /* Tabulator 表頭預設粗體，篩選控制項不要跟著粗 */
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.tabulator .tabulator-header-filter input::placeholder { color: #77777d; }
.tabulator .tabulator-header-filter input:focus,
.tabulator .tabulator-header-filter select:focus {
  outline: none;
  border-color: var(--ink-soft);
}

.tabulator .tabulator-tableholder .tabulator-table { background: var(--surface); color: var(--ink); }
.tabulator-row,
.tabulator-row.tabulator-row-even {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tabulator-row .tabulator-cell {
  border-right: none;
  padding: 10px;
}
.tabulator-row.tabulator-selectable:hover,
.tabulator-row:hover .tabulator-cell { background: var(--raised); }

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--ink-soft);
  font-size: .95rem;
  font-weight: 600;
}

.tabulator .tabulator-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
}

/* Opt-in management surfaces; login keeps its own layout and controls. */
html[data-app-theme="light"] .console-page { min-width: 0; overflow-wrap: anywhere; }
html[data-app-theme="light"] .console-page h1 { color: var(--accent); }
html[data-app-theme="light"] .console-page section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
}
html[data-app-theme="light"] .console-page .view-tab-bar { flex-wrap: wrap; }
html[data-app-theme="light"] .console-page .view-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
html[data-app-theme="light"] .console-page .btn:not(.btn-text) { background: var(--accent); color: #ffffff; }
html[data-app-theme="light"] .console-page .btn:not(.btn-text):hover { background: var(--accent-strong); }
html[data-app-theme="light"] .console-page .btn.btn-text {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
html[data-app-theme="light"] .console-page .btn.btn-text:hover { background: var(--raised); border-color: var(--ink); }
html[data-app-theme="light"] .console-page .btn.btn-danger {
  background: var(--surface);
  border: 1px solid var(--danger);
  color: var(--danger);
}
html[data-app-theme="light"] .console-page .btn.btn-danger:hover { background: var(--danger-soft); }
html[data-app-theme="light"] .console-page .btn:disabled,
html[data-app-theme="light"] .console-page .btn:disabled:hover {
  background: var(--raised);
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
  opacity: 1;
  cursor: not-allowed;
}
html[data-app-theme="light"] .console-page :is(input, select, textarea) {
  max-width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font: inherit;
}
html[data-app-theme="light"] .console-page input[type="file"] { min-width: 0; min-height: 44px; }
html[data-app-theme="light"] .console-page input::file-selector-button {
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--border-strong);
  padding: 6px 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
html[data-app-theme="light"] .console-page input::file-selector-button:hover { background: var(--raised); }
html[data-app-theme="light"] .console-page :is(input, textarea)::placeholder { color: var(--ink-soft); opacity: 1; }
html[data-app-theme="light"] .console-page :is(input, select, textarea):disabled,
html[data-app-theme="light"] .console-page input:disabled::file-selector-button {
  background: var(--raised);
  color: var(--ink-soft);
  opacity: 1;
  cursor: not-allowed;
}
html[data-app-theme="light"] .console-page :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
html[data-app-theme="light"] .console-page .result-warn {
  background: var(--warn-soft);
  color: var(--ink);
}
html[data-app-theme="light"] .console-page .result-error { background: var(--danger-soft); color: var(--danger); }
html[data-app-theme="light"] .console-page .error-list { color: var(--danger); }
html[data-app-theme="light"] .console-page .toggle-btn { color: var(--accent-strong); }
html[data-app-theme="light"] .toast { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
html[data-app-theme="light"] .toast.error { border-color: var(--danger); color: var(--danger); }
html[data-app-theme="light"] .toast.success { border-color: var(--success-icon); color: var(--success); }

/* Tabulator 6: group headers, filters, frozen/editing cells and pagination. */
html[data-app-theme="light"] .tabulator { border: 1px solid var(--border); }
html[data-app-theme="light"] .tabulator .tabulator-header,
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col {
  background: var(--brand-yellow);
  color: var(--ink);
}
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--brand-yellow); }
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col-group-cols { border-top: 1px solid var(--border-strong); }
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col.tabulator-frozen { border-right: 1px solid var(--border-strong); }
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--ink-soft); }
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--ink); }
html[data-app-theme="light"] .tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--ink); border-bottom-color: transparent; }
html[data-app-theme="light"] .tabulator .tabulator-header-filter :is(input, select) { background: var(--surface); color: var(--ink); font-size: .82rem; }
html[data-app-theme="light"] .tabulator .tabulator-header-filter input::placeholder { color: var(--ink-soft); opacity: 1; }
html[data-app-theme="light"] .tabulator .tabulator-header-filter :is(input, select):focus { border-color: var(--accent-strong); outline: 2px solid var(--accent-strong); outline-offset: 1px; }
html[data-app-theme="light"] .tabulator .tabulator-row { color: var(--ink); }
html[data-app-theme="light"] .tabulator .tabulator-row .tabulator-cell.tabulator-frozen { background: var(--surface); border-right: 1px solid var(--border-strong); }
html[data-app-theme="light"] .tabulator .tabulator-row:hover .tabulator-cell { background: var(--raised); }
html[data-app-theme="light"] .tabulator .tabulator-row.tabulator-selected,
html[data-app-theme="light"] .tabulator .tabulator-row.tabulator-selected .tabulator-cell { background: #fddc69; }
html[data-app-theme="light"] .tabulator .tabulator-row .tabulator-cell.editable:hover { background: var(--accent-soft); }
html[data-app-theme="light"] .tabulator .tabulator-row .tabulator-cell.tabulator-editing { background: var(--surface); border: 2px solid var(--accent-strong); }
html[data-app-theme="light"] .tabulator .tabulator-row.tabulator-group { background: var(--raised); color: var(--ink); border-color: var(--border); }
html[data-app-theme="light"] .tabulator .tabulator-row.tabulator-group span { color: var(--ink-soft); }
html[data-app-theme="light"] .tabulator .tabulator-row.tabulator-group .tabulator-arrow { border-left-color: var(--ink); }
html[data-app-theme="light"] .tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { border-top-color: var(--ink); border-left-color: transparent; }
html[data-app-theme="light"] .tabulator .tabulator-footer { background: var(--surface); color: var(--ink-soft); }
html[data-app-theme="light"] .tabulator .tabulator-footer .tabulator-page {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
html[data-app-theme="light"] .tabulator .tabulator-footer .tabulator-page:not(:disabled):hover { background: var(--raised); color: var(--ink); }
html[data-app-theme="light"] .tabulator .tabulator-footer .tabulator-page.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }
html[data-app-theme="light"] .tabulator .tabulator-footer .tabulator-page:disabled { background: var(--raised); color: var(--ink-soft); opacity: 1; cursor: not-allowed; }
html[data-app-theme="light"] .tabulator .tabulator-alert .tabulator-alert-msg { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
html[data-app-theme="light"] .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error { color: var(--danger); border-color: var(--danger); }