/* 愛普樂科技（iPro）企業識別：https://www.ipro-wow.com/ 黑色頁首＋燈泡標誌的薄荷綠／灰。
   品牌原色 --mint #66be96、--gray #939494 在白底對比只有 2.24／3.04，只能當裝飾或用在黑底上（黑底 9.37／6.90）；
   白底上的按鈕、連結一律用深一階的 --accent #2a7354（白底 5.71、--soft 底 5.23）。改色前先算對比（文字 ≥4.5）。
   只做淺色：官網是白底黑頁首，同 funbox 後台不做深色模式。 */
:root {
  color-scheme: light;
  --mint: #66be96; --gray: #939494;
  --bar: #000000; --bar-ink: #ffffff; --bar-muted: #b9bdbc;
  --bg: #f4f6f5; --panel: #ffffff; --ink: #1c1f1e; --muted: #5c6261; --line: #e1e5e3;
  --accent: #2a7354; --accent-ink: #ffffff; --ok: #2a7354; --warn: #a35a00; --bad: #b42318;
  --soft: #eef7f2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* 頁首：同官網的黑底白字，選中的頁籤用薄荷綠底線 */
.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 8px 16px 0; background: var(--bar); color: var(--bar-ink); border-bottom: 3px solid var(--mint); }
.brand { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt small { font-size: 12px; color: var(--bar-muted); letter-spacing: .08em; }
.brand-txt b { font-size: 17px; letter-spacing: .04em; }
nav { display: flex; gap: 2px; flex-wrap: wrap; align-self: stretch; }
nav button { border: 0; border-radius: 0; background: none; padding: 10px 12px 9px; cursor: pointer; color: var(--bar-muted); border-bottom: 3px solid transparent; margin-bottom: -3px; }
nav button:hover { color: var(--bar-ink); }
nav button.on { color: var(--bar-ink); font-weight: 700; border-bottom-color: var(--bar-ink); }
.who { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--bar-muted); font-size: 14px; padding-bottom: 8px; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
.top .link { color: var(--mint); }

main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px; flex: 1; }
h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0; }
.muted { color: var(--muted); font-size: 13px; }
.err { color: var(--bad); }
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
.bar:first-child { margin-top: 4px; }

.login { max-width: 460px; margin: 8vh auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.login-brand { display: flex; align-items: center; gap: 14px; background: var(--bar); color: var(--bar-ink); padding: 22px 28px; border-bottom: 3px solid var(--mint); }
.wordmark { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.wordmark b { font-size: 18px; letter-spacing: .06em; }
.wordmark span { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.wordmark em { font-style: normal; color: var(--mint); }
.login-body { padding: 24px 28px 28px; }
#gbtn { margin-top: 18px; min-height: 44px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: var(--muted); }
.dot.on { background: var(--ok); }
.dot.bad { background: var(--bad); }

/* 機台總覽清單（同全家／funbox 後台：一台一列，左邊色條＝連線狀態；手機改成精簡兩三行，不做卡片） */
.mlist td { vertical-align: middle; }
.mlist tr.on td:first-child { box-shadow: inset 4px 0 var(--ok); }
.mlist tr.bad td:first-child { box-shadow: inset 4px 0 var(--bad); }
.mlist tr.off td:first-child { box-shadow: inset 4px 0 var(--muted); }
.mlist .ml-k { display: none; }
.mlist .ml-sync { color: var(--muted); font-size: 13px; }
.mlist .ml-today b, .mlist .ml-month b { font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
/* 過濾器（同全家後台）：第一行機台、日期、狀態、查詢，匯出 CSV 靠右；搜尋框在最下面用分隔線隔開；控制項一律 40px 高才對得齊 */
.filters .f-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.filters .f-end { margin-left: auto; }
.filters input, .filters select, .filters button { min-height: 40px; }
.filters .tsearch { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.filters .tsearch-f { display: block; flex: 1; font-size: inherit; color: inherit; }
.filters label, .form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0; }
button { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
button.ghost { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }

.summary { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 2px; font-size: 14px; }
.summary b { font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.grid th { position: sticky; top: 0; background: var(--soft); font-weight: 600; font-size: 13px; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid td.r, .grid th.r { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr.click { cursor: pointer; }
.grid tr.click:hover td { background: var(--soft); }
.grid tfoot td { font-weight: 600; background: var(--soft); }
.grid.small { font-size: 12px; }
.grid.small td { white-space: normal; }
.st { font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; }
.st.paid { color: var(--ok); }
.st.failed, .st.cancelled { color: var(--bad); }
.st.pending { color: var(--warn); }
.more { text-align: center; margin: 12px; }

.form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.form.row, .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: end; }
.form .chk { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
fieldset legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
fieldset label { flex-direction: row !important; align-items: center; gap: 6px; color: var(--ink) !important; font-size: 14px !important; }
td input { padding: 4px 6px; width: 9em; }

dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); width: min(720px, calc(100vw - 32px)); max-height: 85vh; padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog .close { position: absolute; right: 12px; top: 10px; background: none; border: 0; color: var(--muted); font-size: 22px; padding: 0 6px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { padding: 6px 0 6px 14px; position: relative; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.timeline code { font-size: 12px; color: var(--muted); word-break: break-all; }

.foot-co { text-align: center; font-size: 12px; color: var(--muted); padding: 16px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .who { margin-left: 0; }
  .top { padding: 8px 12px 0; }
  /* 手機：品牌＋帳號在上，頁籤整列放最下面，選中的底線才會貼著頁首底邊；頁籤多就橫向滑 */
  .who { order: 1; width: 100%; padding-bottom: 4px; font-size: 13px; }
  nav { order: 2; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav button { padding: 9px 10px 8px; white-space: nowrap; flex: none; }
  .login { margin: 4vh auto; }
  .login-brand { padding: 18px 20px; gap: 12px; }
  .wordmark b { font-size: 16px; }
  .login-body { padding: 20px; }
  .filters label { flex: 1 1 40%; }
  /* 機台總覽：一台一段。第 1 行代號＋場域，第 2 行今日／本月，第 3 行連線／最後交易 */
  .mlist-wrap { overflow: visible; }
  .mlist, .mlist tbody { display: block; }
  .mlist thead { display: none; }
  .mlist tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "today month" "sync last";
    gap: 4px 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--line); }
  .mlist tr:last-child { border-bottom: 0; }
  .mlist td { display: block; padding: 0; border: 0; white-space: normal; box-shadow: none !important; }
  .mlist tr.on { box-shadow: inset 4px 0 var(--ok); } .mlist tr.bad { box-shadow: inset 4px 0 var(--bad); } .mlist tr.off { box-shadow: inset 4px 0 var(--muted); }
  .mlist .ml-name { grid-area: name; min-width: 0; }
  .mlist td.ml-today { grid-area: today; text-align: left; }
  .mlist td.ml-month { grid-area: month; text-align: right; }
  .mlist .ml-sync { grid-area: sync; font-size: 12px; }
  .mlist .ml-last { grid-area: last; text-align: right; font-size: 12px; }
  .mlist .ml-k { display: inline; color: var(--muted); font-size: 12px; }
}

/* App 內建瀏覽器（LINE／FB／IG）擋 Google 登入時的說明（見 public/inapp.js） */
.inapp { display: grid; gap: 10px; text-align: left; max-width: 380px; margin: 0 auto; }
.inapp p { margin: 0; }
.inapp .err { font-weight: 700; }
.inapp .hint { color: var(--muted, #777); font-size: 13px; }
.inapp .btn { display: block; width: 100%; text-align: center; text-decoration: none; font: inherit;
  font-weight: 700; padding: 11px 14px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; }
.inapp .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.inapp .url { display: block; word-break: break-all; font-size: 12px; opacity: .7; }

/* 清單全文搜尋（app.js applySearch）：頁籤標題／查詢條件下方，手機整列 */
.tsearch { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.bar + .tsearch { margin-top: -4px; }
.tsearch-f { position: relative; flex: 1; min-width: 0; max-width: 520px; display: block; }
.tsearch-f svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.tsearch-f input { width: 100%; padding: 8px 10px 8px 36px; background: var(--panel); }
.tsearch .n { white-space: nowrap; }
.tsearch-none { text-align: center; padding: 24px 12px; }
/* 帳號頁的機台勾選清單：篩選＋全選／清除 */
.pick-tools { display: flex; gap: 8px; align-items: center; }
.pick-tools .pick-search { flex: 1 1 0; min-width: 0; }
.pick-tools button { flex: none; }
.tsearch-f input:focus, .pick-search:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* 神明動畫頁 */
.notice { background: #fff6e5; border: 1px solid #f0d9a8; color: #6b4300; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.glayout { margin-bottom: 10px; }
.glayout > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 2px 0; }
.glayout[open] > summary { margin-bottom: 10px; }
.glayout .gshared { margin: 6px 0 12px; }
.glayout .gslots td input { width: 7.5em; }
.glayout .gslots select { max-width: 260px; }
.glayout .gsep { flex: 1; }
.gproblems { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; }
.warnc { color: var(--warn); }
.chk-inline { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--muted); }
.chk-inline input { width: auto; }
.gvideo { width: 100%; max-height: 65vh; background: #000; border-radius: 8px; }
.gimg { max-width: 100%; max-height: 65vh; display: block; margin: 0 auto; }
@media (max-width: 640px) {
  /* 每個神明位置一段：位置＋素材組一行、預覽一行、三個時間並排（帶小標） */
  .glayout .tablewrap { overflow: visible; }
  .gslots, .gslots tbody { display: block; }
  .gslots thead { display: none; }
  .gslots tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "pos set set" "prev prev prev" "t1 t2 t3";
    gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .gslots tr:last-child { border-bottom: 0; }
  .gslots td { display: block; padding: 0; border: 0; white-space: normal; }
  .gslots .gs-pos { grid-area: pos; font-weight: 600; align-self: center; }
  .gslots .gs-set { grid-area: set; }
  .gslots .gs-set select { width: 100%; max-width: none; }
  .gslots .gs-prev { grid-area: prev; }
  .gslots .gs-t::before { content: attr(data-k); display: block; font-size: 12px; color: var(--muted); }
  .gslots .gs-t input { width: 100%; max-width: 100%; min-width: 0; }
  .gslots td:nth-child(4) { grid-area: t1; } .gslots td:nth-child(5) { grid-area: t2; } .gslots td:nth-child(6) { grid-area: t3; }
  /* 機台：一台一段 */
  .gm-wrap { overflow: visible; }
  .gmach, .gmach tbody { display: block; }
  .gmach thead { display: none; }
  .gmach tr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "id site" "cur cur" "sel sel" "act act"; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .gmach tr:last-child { border-bottom: 0; }
  .gmach td { display: block; padding: 0; border: 0; white-space: normal; }
  .gmach .gm-id { grid-area: id; font-weight: 600; } .gmach .gm-site { grid-area: site; }
  .gmach .gm-cur { grid-area: cur; color: var(--muted); font-size: 13px; }
  .gmach .gm-sel { grid-area: sel; } .gmach .gm-sel select { width: 100%; }
  .gmach .gm-act { grid-area: act; display: flex; justify-content: space-between; align-items: center; }
}

/* 通報紀錄（只有 NOTIFY_VIEWERS 看得到）：一則一張卡，訊息原文照 Telegram 換行 */
.ngroups { margin-bottom: 12px; }
.ngroups summary { cursor: pointer; font-weight: 600; }
.ngroups .tablewrap { margin-top: 10px; }
.nlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nlog li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.nlog .nmeta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; }
.nlog .ntext { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; }
.nlog .nerr { color: var(--bad); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.st.ok { color: var(--ok); }
.st.bad { color: var(--bad); }
.st.warn { color: var(--warn); }