/* ==================================================================
   設計 token：色彩／字體。詳見設計提案(2026-07 討論定案)——
   /manage(電腦橫向操作，資訊密度優先)用橙色識別；主入口/場景頁(手機直立
   現場操作，大字大按鈕優先)用藍色識別，兩邊共用同一套中性色與字體節奏。
   ================================================================== */
:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --ink: #17212e;
  --ink-muted: #64748c;
  --line: #e1e7f0;
  --accent-admin: #c2670e;
  --accent-admin-ink: #9a5209;
  --accent-field: #2b5fce;
  --accent-field-ink: #1f4aa8;
  --ok: #1e9e64;
  --warn: #d6900a;
  --danger: #d64545;
  --shadow: 0 1px 2px rgba(23,33,46,.06), 0 8px 24px -14px rgba(23,33,46,.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1420;
    --surface: #171f2e;
    --surface-2: #1e2738;
    --ink: #e7ecf5;
    --ink-muted: #8b9ab3;
    --line: #29344a;
    --accent-admin: #e08a2e;
    --accent-admin-ink: #f0a24e;
    --accent-field: #5b8def;
    --accent-field-ink: #7ea5f2;
    --ok: #34c77f;
    --warn: #f0ac2e;
    --danger: #f16565;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
body {
  font-family: "Bahnschrift", "Segoe UI Variable Text", -apple-system, system-ui, sans-serif;
  margin: 0; padding: 0; background: var(--bg); color: var(--ink);
}
/* 裝置ID/時間戳/msg_id等技術性數據一律用等寬字，數字對齊、掃描一整欄比較不費眼 */
.mono {
  font-family: "Cascadia Code", "Consolas", ui-monospace, "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent-field); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(120deg, var(--accent-field), var(--accent-field-ink)); color: #fff;
  padding: 12px 24px;
}
/* /manage(平台管理者後台，電腦橫向操作)刻意用橙色跟主入口(使用者手機操作場景頁)的藍色區分，
   一眼就能分清楚現在是在哪一邊，避免操作到錯的介面 */
.topbar.topbar-admin { background: linear-gradient(120deg, var(--accent-admin), var(--accent-admin-ink)); }
.topbar .brandmark { width: 20px; height: 20px; flex: none; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.topbar .brand span { font-weight: 400; opacity: .85; font-family: "Cascadia Code", "Consolas", monospace; font-size: 13px; }
.topbar nav { flex: 1; display: flex; gap: 16px; }
.topbar nav a { color: #fff; opacity: .9; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
.topbar .who { font-size: 13px; opacity: .9; }
.topbar .who a { color: #fff; }

.wrap { max-width: 1300px; margin: 0 auto; padding: 20px; }

h2 { font-size: 18px; margin: 20px 0 10px; text-wrap: balance; }
h3 { font-size: 15px; margin: 16px 0 8px; color: var(--accent-field); text-wrap: balance; }

.card {
  background: var(--surface); border-radius: 12px; padding: 16px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.card.no-pad { padding: 0; }  /* 讓.tap-row自己控制padding、貼齊卡片邊緣，加大手機點擊範圍 */

/* 主入口清單(我的專案/專案設備清單)：整列都是可點區域，不是只有小按鈕，手機比較好點 */
.tap-list { display: flex; flex-direction: column; }
.tap-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px; color: var(--ink); border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.tap-list a.tap-row:hover { background: var(--surface-2); text-decoration: none; }
.tap-row:last-child { border-bottom: none; }
.tap-row:first-child { border-radius: 12px 12px 0 0; }
.tap-row:last-child { border-radius: 0 0 12px 12px; }
.tap-row.disabled { color: var(--ink-muted); }
.tap-row-title { font-weight: 600; }
.tap-row-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.tap-row-arrow { color: var(--accent-field); font-weight: 700; }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover td { background: var(--surface-2); }
/* 欄位不換行(避免「離線」「未指派」折成兩行)，依實際內容長度分級給寬度，
   曾經全部統一給160px導致表格太寬、把最右邊的操作按鈕擠出畫面外，改按需求分級。 */
.col-narrow { min-width: 70px; white-space: nowrap; }   /* 狀態(●在線)、訊號(數字) */
.col-mid    { min-width: 110px; white-space: nowrap; }  /* 機種、專案 */
.col-wide   { min-width: 150px; white-space: nowrap; }  /* 心跳／即時上傳(內容最長) */

.muted { color: var(--ink-muted); }
.small { font-size: 12px; color: var(--ink-muted); }

label { display: block; margin-top: 12px; font-size: 12px; color: var(--ink-muted); }
input, select {
  width: 100%; padding: 9px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; background: var(--surface); color: var(--ink);
}
input[readonly] { background: var(--surface-2); color: var(--ink-muted); cursor: not-allowed; }
/* .btn 同時套用在 <button> 和 <a>(頁面連結型操作，如「管理→」「設定場景→」)上，
   統一所有功能操作(按鈕/連結)的外觀與互動方式；display/text-decoration是為了讓<a>套用時跟<button>一致。
   /manage是電腦橫向操作、功能多，故意維持扁平簡潔，不做立體感(那是主入口/場景頁的重點，見.gate-btn) */
.btn {
  display: inline-block; padding: 10px 18px; margin-top: 14px; border: none; border-radius: 8px;
  background: var(--accent-field); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-field-ink); text-decoration: none; }
.btn.small { padding: 6px 12px; margin-top: 0; font-size: 12px; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { filter: brightness(.88); }

.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form select { width: auto; margin-top: 0; }

/* 在線/離線狀態：色+形雙重編碼(膠囊+呼吸動畫)，不是只靠變色文字——色弱使用者也分得出來，
   在線的膠囊帶一圈慢速擴散動畫暗示「這是即時資料」，離線則完全靜止 */
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pill.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pill.off { background: color-mix(in srgb, var(--ink-muted) 16%, transparent); color: var(--ink-muted); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; position: relative; }
.pill.ok .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--ok);
  animation: pill-ring 2.2s ease-out infinite;
}
@keyframes pill-ring { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .pill.ok .dot::after { animation: none; display: none; } }
/* 沿用既有.dot寫法的地方(舊模板)仍然可用，維持向下相容 */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot.online { background: var(--ok); }
.dot.offline { background: var(--ink-muted); }

.bits { white-space: nowrap; }
.bit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 2px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-muted); font-size: 10px;
}
.bit.on { background: var(--accent-field); color: #fff; }

.status-pending { color: var(--warn); }
.status-sent { color: var(--accent-field); }
.status-done { color: var(--ok); }
.status-failed { color: var(--danger); }

.error { color: var(--danger); font-size: 13px; }

.login-card {
  max-width: 360px; margin: 80px auto 0; background: var(--surface); border-radius: 14px;
  padding: 32px; box-shadow: var(--shadow); text-align: center;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card h1 span { font-weight: 400; color: var(--ink-muted); }
.login-card form { text-align: left; }

/* ==================================================================
   主入口場景操作介面(如鐵捲門)：手機直立畫面現場操作為主，字大、按鈕大、
   立體感比排版精簡更重要(跟/manage的電腦橫向操作介面刻意走不同設計方向)
   ================================================================== */
.gate-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; margin: 0 8px 8px 0;
  border-radius: 12px; background: var(--surface); color: var(--ink-muted); font-weight: 700;
  font-size: 16px; box-shadow: var(--shadow);
}
.gate-status svg { width: 16px; height: 16px; flex: none; }
.gate-status.on { color: var(--ok); }
.gate-status-wrap { text-align: center; }

/* 「最近一次操作結果」提示卡：左側色條依狀態變色(排隊=warn／送達=field／完成=ok／失敗=danger)，
   比純文字更容易第一眼注意到，尤其是「失敗」這種需要使用者留意的狀態 */
.last-action {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 16px;
  border-radius: 12px; background: var(--surface); box-shadow: var(--shadow);
  border-left: 4px solid var(--ink-muted); font-size: 13.5px; font-weight: 600;
}
.last-action:empty { display: none; margin: 0; padding: 0; box-shadow: none; }
.last-action.status-pending { border-left-color: var(--warn); }
.last-action.status-sent { border-left-color: var(--accent-field); }
.last-action.status-done { border-left-color: var(--ok); }
.last-action.status-failed { border-left-color: var(--danger); }

/* 一行一個按鈕(直向排列)，依 io_index 順序上到下，如鐵捲門上/停/下三顆按鈕由上而下對應操作順序；
   margin:0 auto 讓這塊(有max-width)在卡片內水平置中，手機直向排列時置中比較符合操作直覺 */
.gate-buttons { display: flex; flex-direction: column; gap: 14px; max-width: 400px; margin: 0 auto; }
.gate-buttons form { margin: 0; }
/* 漸層+內光澤+陰影：讓大按鈕看起來是「按得下去的實體開關」，不是純色網頁連結 */
.gate-btn {
  width: 100%; padding: 30px 20px; margin-top: 0; font-size: 22px; font-weight: 700; border-radius: 14px;
  background: linear-gradient(165deg, var(--accent-field), var(--accent-field-ink));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent-field) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.gate-btn:disabled { background: var(--ink-muted); box-shadow: none; cursor: not-allowed; }