/* 全站共用主題：顏色變數（淺色 / 深色）、主題切換按鈕、Tabulator 表格外觀。
   只有淺色 / 深色兩種，由 theme.js 寫在 <html data-theme>（沒選過時依系統設定決定初始值）。
   系列色 --s1..--s6 已用 dataviz 驗證工具在白底與深色卡片底驗過（亮度、彩度、色盲相鄰辨識、對比）；
   綠 / 紅（--up / --down）只表示漲跌好壞，不當系列色。 */
:root {
  --bg: #F3F4F7; --panel: #fff; --panel-2: #F7F8FA;
  --ink: #141922; --muted: #5F6778; --faint: #8B93A3; --line: #E3E6EC; --line-strong: #C5CBD5;
  --accent: #13865A; --accent-soft: #E1F4EA;
  --up: #13865A; --up-soft: #E1F4EA; --down: #C2412D; --down-soft: #FBE6E2;
  --warn: #A86A00; --warn-soft: #FCF0D6; --info: #2F6FD0; --info-soft: #E3ECFA;
  --blue: var(--info); --blue-soft: var(--info-soft); --prev: #A9B0BC;
  --s1: #2171CC; --s2: #D98B09; --s3: #B83B76; --s4: #578B35; --s5: #7444B4; --s6: #00929F;
  --heat-max: 42%;
  --shadow: 0 6px 20px rgb(0 0 0 / .10);
  --f: "PingFang TC", "Noto Sans TC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0F1218; --panel: #171B23; --panel-2: #1D222B;
  --ink: #E6E9EF; --muted: #98A0AF; --faint: #6B7383; --line: #262C36; --line-strong: #3A414D;
  --accent: #5BD49A; --accent-soft: #16352A;
  --up: #5BD49A; --up-soft: #16352A; --down: #F2846F; --down-soft: #3E1F1A;
  --warn: #F2B24C; --warn-soft: #3A2C12; --info: #7FA8F0; --info-soft: #1D2A42; --prev: #566072;
  --s1: #5294E6; --s2: #C38824; --s3: #CA5E96; --s4: #6B9C4F; --s5: #956ED2; --s6: #10A6AD;
  --heat-max: 30%;
  --shadow: 0 6px 20px rgb(0 0 0 / .45);
  color-scheme: dark;
}

/* 主題切換按鈕（theme.js 填入 [data-theme-toggle]） */
.theme-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 8px; padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.theme-btn:hover { color: var(--ink); border-color: var(--line-strong); }

/* Tabulator：清楚簡約——只留橫向細線、不用斑馬紋與直線，表頭小字灰色，數字等寬 */
.tabulator { background: var(--panel); border: 0; border-radius: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.tabulator .tabulator-header { background: var(--panel); color: var(--muted); border-bottom: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; }
.tabulator .tabulator-header .tabulator-col { background: var(--panel); border-right: 0; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 8px 10px; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background: var(--panel); color: var(--ink); }
.tabulator .tabulator-header .tabulator-col[aria-sort=ascending], .tabulator .tabulator-header .tabulator-col[aria-sort=descending] { color: var(--ink); }
/* 排序箭頭：未排序時隱藏、滑過表頭才淡淡出現；排序中的欄位用主文字色（選擇器要和 Tabulator 一樣帶 .tabulator-sortable 才蓋得過） */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: transparent; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none]:hover .tabulator-col-content .tabulator-col-sorter .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover { border-bottom-color: var(--faint); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover { border-bottom-color: var(--ink); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover { border-top-color: var(--ink); color: var(--ink); }
.tabulator .tabulator-tableholder .tabulator-table { background: var(--panel); color: var(--ink); }
.tabulator-row, .tabulator-row.tabulator-row-even { background: var(--panel); border-bottom: 1px solid var(--line); min-height: 0; }
@media (hover: hover) { .tabulator-row.tabulator-selectable:hover { background: var(--panel-2); } }
.tabulator-row .tabulator-cell { border-right: 0; padding: 7px 10px; }
.tabulator-row .tabulator-cell.tabulator-frozen, .tabulator .tabulator-header .tabulator-col.tabulator-frozen { background: inherit; }
.tabulator .tabulator-header .tabulator-col.tabulator-frozen { background: var(--panel); }
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left, .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--line); }
.tabulator-row.tabulator-group { background: var(--panel-2); border-bottom: 1px solid var(--line); border-top: 0; color: var(--ink); font-weight: 600; }
.tabulator-row.tabulator-group:hover { background: var(--panel-2); }
.tabulator-row.tabulator-group span { color: var(--muted); font-weight: 400; margin-left: 0; }
.tabulator-row.tabulator-group .tabulator-arrow { border-left-color: var(--muted); }
.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { border-top-color: var(--muted); border-left-color: transparent; }
/* 合計列：上方一條較深的線、粗體，不另加底色 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs { background: var(--panel) !important; border-top: 1px solid var(--line-strong); border-bottom-color: var(--line); font-weight: 600; }
.tabulator .tabulator-footer { background: var(--panel); border-top: 0; color: var(--muted); font-weight: 400; }
.tabulator .tabulator-footer .tabulator-calcs-holder { background: var(--panel) !important; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { background: var(--panel) !important; color: var(--ink); font-weight: 600; }
.tabulator-row.tabulator-calcs .tabulator-cell { overflow: visible; }
.tabulator .tabulator-footer .tabulator-paginator { color: var(--muted); }
.tabulator .tabulator-footer .tabulator-page { background: var(--panel); color: var(--ink); border-color: var(--line); border-radius: 6px; }
.tabulator .tabulator-footer .tabulator-page:not(:disabled):hover { background: var(--panel-2); color: var(--ink); }
.tabulator .tabulator-footer .tabulator-page.active { color: var(--info); border-color: var(--info); }
.tabulator .tabulator-footer .tabulator-page-size { background: var(--panel); color: var(--ink); border-color: var(--line); border-radius: 6px; }
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { color: var(--muted); font-size: 13px; font-weight: 400; }
.tabulator .tabulator-col-resize-handle:hover { background: var(--line); }
.tabulator .tabulator-tableholder { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* 日期選擇（flatpickr，period.js）：報表頁與首頁共用；顏色改用主題變數，淺色 / 深色一致；不留箭頭 */
.flatpickr-calendar{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);font-family:var(--f)}
.flatpickr-calendar:before,.flatpickr-calendar:after{display:none}
.flatpickr-months .flatpickr-month,.flatpickr-current-month,.flatpickr-current-month input.cur-year,.flatpickr-current-month .flatpickr-monthDropdown-months{color:var(--ink);fill:var(--ink);background:transparent}
.flatpickr-current-month .flatpickr-monthDropdown-months option{background:var(--panel)}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{color:var(--muted);fill:var(--muted)}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--blue)}
span.flatpickr-weekday{color:var(--muted);background:transparent}
.flatpickr-day{color:var(--ink)}
.flatpickr-day:hover,.flatpickr-day:focus{background:var(--blue-soft);border-color:transparent}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--faint);background:transparent}
.flatpickr-day.today{border-color:var(--line-strong)}
.dayContainer+.dayContainer{box-shadow:-1px 0 0 var(--line)}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 var(--blue-soft),5px 0 0 var(--blue-soft)}
.flatpickr-day.inRange{background:var(--blue-soft);border-color:transparent;box-shadow:-5px 0 0 var(--blue-soft),5px 0 0 var(--blue-soft)}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{background:var(--blue);border-color:var(--blue);color:var(--panel)}
/* 比對期：琥珀色連續區間帶（與查詢期的藍色區間同一種畫法）；和查詢期重疊的日子保留藍色、底部加琥珀線 */
.flatpickr-day.fp-c:not(.inRange):not(.selected):not(.startRange):not(.endRange){background:var(--warn-soft);border-color:transparent;border-radius:0;box-shadow:-5px 0 0 var(--warn-soft),5px 0 0 var(--warn-soft)}
.flatpickr-day.fp-cs:not(.inRange):not(.selected):not(.startRange):not(.endRange){border-radius:50px 0 0 50px;border-color:var(--warn);box-shadow:5px 0 0 var(--warn-soft)}
.flatpickr-day.fp-ce:not(.inRange):not(.selected):not(.startRange):not(.endRange){border-radius:0 50px 50px 0;border-color:var(--warn);box-shadow:-5px 0 0 var(--warn-soft)}
.flatpickr-day.fp-cs.fp-ce:not(.inRange):not(.selected):not(.startRange):not(.endRange){border-radius:50px;box-shadow:none}
.flatpickr-day.fp-c.inRange{box-shadow:-5px 0 0 var(--blue-soft),5px 0 0 var(--blue-soft),inset 0 -3px 0 var(--warn)}
.flatpickr-day.fp-c.selected,.flatpickr-day.fp-c.startRange,.flatpickr-day.fp-c.endRange{box-shadow:inset 0 -3px 0 var(--warn)}
.fp-presets{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-top:1px solid var(--line)}
.fp-presets button{font:inherit;font-size:12px;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px 8px;cursor:pointer}
.fp-presets button:hover{border-color:var(--blue)} .fp-presets button.on{border-color:var(--blue);color:var(--blue);font-weight:700}
.fp-hint{font-size:12px;color:var(--muted);align-self:center}
.fp-pick{margin:0 8px 8px;padding:4px 8px;font-size:12px;color:var(--ink);background:var(--warn-soft);border-radius:6px}
.fp-pick[hidden]{display:none}
.fp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 8px 8px}
.fp-foot [data-ok]{font:inherit;font-size:12px;color:var(--panel);background:var(--blue);border:0;border-radius:8px;padding:3px 12px;cursor:pointer}
.fp-hint .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px -1px 0}
.fp-hint .sw.q{background:var(--blue)} .fp-hint .sw.c{background:var(--warn-soft);border:1px solid var(--warn)}

/* 頂部帳號與登出（common.js 在需要登入的環境插在主題按鈕後面） */
.account { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.account a { color: var(--muted); text-decoration: none; }
.account a:hover { color: var(--accent); }