/* ================================================================
   WC Pool 前端 — 全局樣式
   與後端 Jinja2 模板保持一致的暗色主題
   ================================================================ */

:root {
  --bg: #0f1115;
  --card: #181b22;
  --line: #262a33;
  --accent: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --muted: #7c8493;
  --text: #e6e8ee;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
  max-width: 780px;
  margin: 0 auto;
  padding: 18px;
}

/* ---------- 通用組件 ---------- */

h1 { font-size: 22px; margin: 8px 0 4px; }
h2 { font-size: 18px; margin-top: 24px; }
h3 { font-size: 15px; }

.meta {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 18px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin: 12px 0;
}

/* ---------- 導航欄 ---------- */

.nav {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.nav a {
  color: #7da9ff;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  transition: background .15s;
}

.nav a:hover { background: #1f2330; }

.nav input[type="date"] {
  background: #1f2330;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color-scheme: dark;
}

/* ---------- 比賽卡片 ---------- */

.match-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.line-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  align-items: center;
}

.line-row:first-of-type { border-top: none; }

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

.odd {
  background: #1f2330;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: .15s;
  font-size: 13px;
}

.odd:hover { background: #2a2f3d; }
.odd .h { color: var(--muted); margin-right: 6px; }
.odd .o { color: var(--accent); font-weight: 600; }

/* ---------- 競猜表單 ---------- */

form.bet-form {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr auto;
  gap: 6px;
  margin-top: 18px;
}

form.bet-form input,
form.bet-form select,
form.bet-form button {
  background: #1f2330;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  min-width: 0;
}

form.bet-form button {
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  cursor: pointer;
  border: none;
  align-self: end;
}

form.bet-form label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
  display: block;
}

form.bet-form .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 600px) {
  form.bet-form { grid-template-columns: 1fr 1fr; gap: 10px; }
  form.bet-form .field-name,
  form.bet-form .field-match { grid-column: 1 / -1; }
  form.bet-form button { grid-column: 1 / -1; padding: 12px; font-size: 15px; }
}

/* ---------- 競猜記錄表 ---------- */

.bets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bets-table th,
.bets-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.bets-table th { color: var(--muted); font-weight: 500; }

/* ---------- 結果顏色 ---------- */

.win { color: #22c55e; }
.loss { color: #ef4444; }
.half { color: #fbbf24; }
.push { color: #7c8493; }
.pending { color: #7c8493; }

/* ---------- 操作鏈接 ---------- */

.row-act {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  margin-left: 10px;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.row-act:first-child { margin-left: 0; }
.row-act:hover { color: var(--text); }

.row-lock {
  color: #3a4050;
  display: inline-flex;
  align-items: center;
}

/* ---------- Flash 消息 ---------- */

.flash {
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  font-size: 13px;
}

.flash.ok { background: #0d2818; color: #86efac; border: 1px solid #166534; }
.flash.err { background: #2a1212; color: #fca5a5; border: 1px solid #7f1d1d; }

/* ---------- 文本域 ---------- */

textarea {
  width: 100%;
  min-height: 90px;
  background: #1f2330;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font-family: monospace;
  font-size: 13px;
}

/* ---------- 登入頁 ---------- */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  width: 320px;
  text-align: center;
}

.login-card input {
  width: 100%;
  box-sizing: border-box;
  background: #1f2330;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  margin-top: 16px;
}

.login-card button {
  width: 100%;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  margin-top: 12px;
}

.login-card .err {
  color: var(--bad);
  font-size: 13px;
  margin-bottom: 8px;
}

.login-card .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

/* ---------- 編輯頁 ---------- */

.edit-page {
  max-width: 480px;
}

.edit-page input,
.edit-page select {
  width: 100%;
  box-sizing: border-box;
  background: #1f2330;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  font-size: 14px;
}

.edit-page label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 4px;
}

.edit-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn {
  flex: 1;
  padding: 11px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.btn-save { background: var(--accent); color: #0a0a0a; }
.btn-del { background: #7f1d1d; color: #fca5a5; }
.btn-cancel { background: var(--line); color: var(--text); text-decoration: none; text-align: center; display: block; line-height: 1.3; padding: 11px; }

/* ---------- 賽果頁 ---------- */

.recap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.recap-table td,
.recap-table th {
  padding: 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.detail-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.detail-table td {
  padding: 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.detail-table td:nth-child(1) { width: 32px; text-align: center; }
.detail-table td:nth-child(2) { width: 64px; color: var(--muted); font-variant-numeric: tabular-nums; }
.detail-table td:nth-child(4) { width: 150px; color: #9aa3b2; font-variant-numeric: tabular-nums; }
.detail-table td:nth-child(5) { width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.detail-table td:nth-child(6) { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Loading ---------- */

.loading {
  text-align: center;
  padding: 40px;
  color: var(--muted);
  font-size: 14px;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Details/Summary ---------- */

details summary {
  cursor: pointer;
  padding: 6px 0;
  color: var(--muted);
}

/* ---------- 隱藏輔助 ---------- */

.hidden { display: none !important; }