/* 總營運後台「一般頁」與登入／設定頁的元件樣式（OC 外觀統一）。
   顏色、字體、圓角、陰影全部用 dashboard.css 的變數（那份是唯一的來源，會跟系統淺色／深色）；這份只補「舊頁面裡的元件」：
   表單、表格、燈號底色、徽章、提示。一般頁的內容包在 .page 裡，登入頁包在 .auth__card 裡，所以不會碰到總覽的卡片牆。
   不引外部資源（CSP 的 style-src 'self'）。燈號不只靠顏色：每一盞燈有「顏色＋文字＋形狀」（綠●、黃▲、紅■、沒資料○）。 */

/* ── 一般頁：內容區 ── */
.page .card { display: block; margin: 0 0 var(--gap); padding: 18px; }
.page .card > :first-child { margin-top: 0; }
.page h2 { font-size: 16px; font-weight: 650; color: var(--text-strong); margin: 22px 0 8px; }
.page h3 { font-size: 14.5px; font-weight: 650; color: var(--text-strong); margin: 16px 0 6px; }
.page .card > h2:first-child { margin-top: 0; }
.page p { margin: 8px 0; }
/* 說明文字一行不要拉到整個螢幕那麼長（滿版的寬螢幕上很難讀）；表格與卡片不受影響（OC 外觀 #8） */
.page p, .page .link-list { max-width: 46rem; }
/* 有底色的狀態列與按鈕列是版面元件、不是說明文字：限寬會把底色截短 */
.page .summary, .page .btn-row { max-width: none; }
.page label, .auth__card label { display: block; margin: 14px 0 4px; font-weight: 600; color: var(--text-strong); }
label.checkbox { display: flex; gap: 8px; align-items: center; font-weight: 400; }
label.checkbox input { width: auto; min-height: 0; }
/* 輸入框邊框用 --faint 而不用 --border-strong：後者對背景只有約 1.5–1.8:1，不合 WCAG 非文字對比 3:1。 */
.page input, .page select, .page textarea, .auth__card input {
  display: block; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--faint); border-radius: 10px;
  font: inherit; background: var(--surface); color: var(--text);
}
.page textarea { min-height: 96px; }
.page input[type="radio"], .page input[type="checkbox"] { display: inline-block; width: auto; min-height: 0; padding: 0; }
/* 內文連結要有底線（不只靠顏色分辨）；按鈕樣式的連結與徽章不加。 */
.page a:not(.btn):not(.badge) { text-decoration: underline; }
.page button, .auth__card button {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--primary-solid); background: var(--primary-solid); color: var(--on-primary); font-size: 14px; font-weight: 600; cursor: pointer;
}
.page button:hover, .auth__card button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.page button.secondary { background: var(--surface); color: var(--text-strong); border-color: var(--border-strong); }
.page button.secondary:hover { background: var(--surface-3); }
.page .inline { display: inline; }
.page form.inline button, .page button.inline { margin: 0; min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.stacked { display: block; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.page .btn { background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary); }
.page .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); text-decoration: none; }
.nowrap { white-space: nowrap; }
.error { color: var(--bad-fg); }
code { font-family: var(--font-mono); font-size: 13px; word-break: break-word; }
td.full { min-width: 12rem; }
td.actions form { margin-bottom: 6px; }
.qr { display: block; margin: 16px auto; max-width: 100%; height: auto; }
.secret { font-family: var(--font-mono); letter-spacing: .05em; word-break: break-word; text-align: center; }

/* ── 提示與徽章 ── */
.flash.info { border-left: 4px solid var(--ok); background: var(--ok-bg); }
.alert { margin: 0 0 8px; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--warn); background: var(--warn-bg); }
.alert.error { border-left-color: var(--bad); background: var(--bad-bg); }
.alert p { margin: 0; }
.badge { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.badge.accent { background: var(--primary-soft); color: var(--primary); }
.badge.warning { background: var(--warn-bg); color: var(--warn-fg); }
.badge.error { background: var(--bad-bg); color: var(--bad-fg); }

/* ── 燈號：顏色＋文字＋形狀（顏色變數沿用 dashboard.css 的 .level-*）── */
.page .summary { display: block; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--border-strong); background: var(--surface-3); font-weight: 700; }
.page .summary.level-green { border-left-color: var(--ok); background: var(--ok-bg); }
.page .summary.level-yellow { border-left-color: var(--warn); background: var(--warn-bg); }
.page .summary.level-red { border-left-color: var(--bad); background: var(--bad-bg); }
.level-unknown { color: var(--muted); }
.lamp::before { content: "○ "; }
.level-green .lamp::before, .level-green.lamp::before { content: "● "; }
.level-yellow .lamp::before, .level-yellow.lamp::before { content: "▲ "; }
.level-red .lamp::before, .level-red.lamp::before { content: "■ "; }
td.level-green { background: var(--ok-bg); }
td.level-yellow { background: var(--warn-bg); }
td.level-red { background: var(--bad-bg); }

/* ── 表格：桌機是一般表格，窄螢幕每一列變一張卡片（每格的欄名在 data-label）── */
table.cards { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
table.cards th, table.cards td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.cards th { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
table.cards tbody tr:nth-child(even) td:not([class*="level-"]) { background: var(--surface-2); }
table.status td { min-width: 6rem; }
@media (max-width: 40rem) {
  table.cards, table.cards thead, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards thead { position: absolute; left: -9999px; }
  table.cards tr { margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  table.cards td { border-bottom: 1px solid var(--border); }
  table.cards td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
  table.cards td:not([data-label])::before { content: none; }
}

/* OC-5b：網站頁的「全部 35 盞燈」摺疊（舊的寬表收在裡面）*/
.wide-lights > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

/* ── 登入與設定頁（還沒登入，沒有版頭）── */
body.auth { background: var(--band); }
.auth__card { max-width: 28rem; margin: 40px auto; padding: 28px 24px 32px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.auth__brand { margin: 0 0 18px; }
.auth__card h1 { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: 0 0 14px; }
.auth__card p { margin: 8px 0; }
.auth__card button { width: 100%; }
.auth__card .flash { margin-top: 0; }
@media (max-width: 699px) {
  /* 手機也是一張有外框的卡片（跟桌面一致），不再整頁貼邊（OC 外觀 #5） */
  .auth__card { margin: var(--gutter) auto; max-width: min(28rem, calc(100% - 2 * var(--gutter))); padding: 24px 18px 28px; }
}