/*
 * Vercel 版だけの見た目の上書き（soda-board に揃える）。claude.ai 版（直下の index.html）には入らない。
 * build.mjs が index.html の <head> に読み込ませる。login.html と users.html も読み込む。
 * 値は sb-tokens.css（soda-board と同じ値）。
 *
 * index.html の <style> はこのファイルより後ろにあるので、同じ強さの書き方だと負ける。
 * そのため変数は :root:root:root、部品は先頭に「html body」を付けて、強さを1段上げて書いている。
 * クラス名・ID は index.html の JavaScript が使っているので、ここでは見た目だけを変える。
 * 状態の色（--warn / --crit / --ok / --mid / --mark）と、はんこ・地図の印は変えない。
 */

/* ---------- 色・フォントを soda-board の値につなぐ ---------- */
:root:root:root {
  --bg: var(--sb-parchment); --surface: var(--sb-canvas); --surface-2: var(--sb-parchment);
  --line: var(--sb-hairline); --line-strong: var(--sb-field); --ink: var(--sb-ink);
  --fg: var(--sb-ink); --fg-2: var(--sb-muted); --fg-3: #86868b;
  --accent: var(--sb-action); --accent-fg: #ffffff; --accent-soft: var(--sb-action-weak);
  --font-body: var(--sb-font); --font-head: var(--sb-font);
  --radius: var(--sb-radius-lg); --shadow: none;
}
/* OS がダークのとき（いまの作りどおり OS に従う。色だけ soda-board のダークの値にする） */
@media (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="light"]) {
    --sb-canvas: #1c1c1e; --sb-parchment: #000000; --sb-ink: #f5f5f7; --sb-ink-soft: #d2d2d7;
    --sb-muted: #a1a1a6; --sb-hairline: #38383a; --sb-divider: #2c2c2e; --sb-field: #48484a;
    --sb-action: #2997ff; --sb-action-fill: #0066cc; --sb-action-focus: #2997ff; --sb-action-weak: #102a43;
    --surface-2: #2c2c2e; --fg-3: #8e8e93;
  }
}
:root:root:root[data-theme="dark"] { --surface-2: #2c2c2e; --fg-3: #8e8e93; }

/* ---------- 文字 ---------- */
html body { font-family: var(--sb-font); font-size: 17px; -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3 { font-weight: 600; }
html body :focus-visible { outline-color: var(--sb-action-focus); }

/* ---------- ヘッダー（白い帯＋下線。左に「‹ ダッシュボード」とアプリ名） ---------- */
html body .topbar-in { padding-block: 10px; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
html body .sb-back { display: inline-flex; align-items: center; gap: 4px; height: 32px; margin-left: 0; padding: 0 14px 0 10px; border: 0; border-radius: 9999px; background: var(--sb-parchment); color: var(--sb-ink-soft); font-size: 14px; font-weight: 400; line-height: 1; text-decoration: none; white-space: nowrap; }
html body .sb-back:hover { background: var(--sb-hairline); color: var(--sb-ink); text-decoration: none; }
html body .sb-back svg { flex: none; }
/* ダークのときは、ヘッダー（#1c1c1e）に沈まないよう、明るめのグレーの面とほぼ白の文字にする */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .sb-back { background: #3a3a3c; color: #f5f5f7; }
  html:not([data-theme="light"]) body .sb-back:hover { background: #48484a; color: #ffffff; }
}
html[data-theme="dark"] body .sb-back { background: #3a3a3c; color: #f5f5f7; }
html[data-theme="dark"] body .sb-back:hover { background: #48484a; color: #ffffff; }
html body .brand h1 { font-size: 21px; font-weight: 600; letter-spacing: .231px; }
html body .brand small { font-size: 12px; color: var(--sb-muted); }
html body nav a { font-size: 15px; font-weight: 400; color: var(--sb-ink-soft); padding: 8px 14px; }
html body nav a[aria-current="page"] { background: var(--sb-action-weak); color: var(--sb-action); font-weight: 600; }

/* ---------- ボタン（丸いボタン。主な操作は青の塗り、ほかは青の枠） ---------- */
html body .btn {
  min-height: 44px; justify-content: center; padding: 8px 22px; border-radius: var(--sb-radius-pill);
  border: 1px solid var(--sb-action); background: transparent; color: var(--sb-action);
  font-weight: 400; transition: transform .1s;
}
html body .btn:hover { background: var(--sb-action-weak); }
html body .btn:active { transform: scale(.95); }
html body .btn.primary { background: var(--sb-action-fill); border-color: var(--sb-action-fill); color: #ffffff; }
html body .btn.primary:hover { background: var(--sb-action-fill); filter: brightness(1.08); }
html body .btn.danger { color: var(--crit); border-color: var(--crit); }
html body .btn.danger:hover { background: var(--crit-soft); }
html body .btn.sm { min-height: 32px; padding: 4px 14px; font-size: 14px; }
html body .btn:disabled, html body .btn[disabled] { transform: none; }
html body .seg { border-color: var(--sb-field); }
html body .seg button { font-weight: 400; color: var(--sb-ink-soft); padding: 8px 16px; }
html body .seg button[aria-pressed="true"] { background: var(--sb-action-fill); color: #ffffff; }

/* ---------- 入力欄 ---------- */
html body input[type=text], html body input[type=search], html body input[type=date], html body input[type=time],
html body input[type=email], html body input[type=password], html body input:not([type]), html body select, html body textarea {
  min-height: 44px; border: 1px solid var(--sb-field); border-radius: var(--sb-radius-sm); padding: 8px 12px; background: var(--sb-canvas);
}
html body textarea { min-height: 88px; }
html body input[type=search] { border-radius: var(--sb-radius-pill); padding-inline: 18px; }

/* ---------- カード・表・お知らせ ---------- */
html body .card { border-radius: var(--sb-radius-lg); padding: 24px; }
html body .card h2 { font-size: 21px; }
html body .stat { border-radius: var(--sb-radius-lg); padding: 14px 18px; }
html body .stat .n { font-weight: 600; }
html body .tablewrap, html body .wrap { border-radius: var(--sb-radius-lg); }
html body th { font-size: 13px; font-weight: 600; background: var(--sb-parchment); }
html body td { font-size: 15px; border-bottom-color: var(--sb-divider); }
html body .notice, html body .err, html body .confirm { border-radius: var(--sb-radius-md); }
html body .box { border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius-md); }
html body .box > .bh { font-weight: 600; }
html body .aibox, html body .risklv, html body .stamp, html body .scanitem, html body .mapwrap { border-radius: var(--sb-radius-md); }
html body .toast { box-shadow: none; font-weight: 400; }
html body td.no, html body .dhead .no, html body .risklv .v { font-weight: 600; }

/* ---------- ログイン画面（login.html） ---------- */
html body main.card { border-radius: var(--sb-radius-lg); padding: 28px 26px 24px; }
html body main.card .brand h1 { font-size: 21px; }
html body main.card .btn { width: 100%; display: flex; }
/* この画面の「ログイン」は .primary を付けずに主ボタンにしているので、青の塗りにする（.sub は青の枠のまま） */
html body main.card .btn:not(.sub) { background: var(--sb-action-fill); border-color: var(--sb-action-fill); color: #ffffff; }
html body main.card .btn:not(.sub):hover { filter: brightness(1.08); }

/* ---------- 利用者の管理（users.html） ---------- */
html body .topbar a:not(.sb-back):not(.btn) { font-size: 15px; font-weight: 400; }
html body .addgrid input, html body .addgrid select, html body .inline input { background: var(--sb-canvas); }
html body .add { border-radius: var(--sb-radius-lg); padding: 18px 20px 16px; }
html body .tag { font-weight: 600; white-space: nowrap; }

/* ---------- 表の中のボタン・入力欄は小さめ（行が高くならないように） ---------- */
html body td .btn { min-height: 32px; padding: 3px 12px; font-size: 13px; }
html body td input[type=text], html body td input:not([type]) { min-height: 32px; padding: 4px 10px; font-size: 14px; }