/*
 * 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 が使っているので、ここでは見た目だけを変える。
 * 状態の色（未完了の枠・30日超の黄・90日超の赤・完了の緑）と依頼番号のタグは変えない。
 */

/* ---------- 色・フォントを soda-board の値につなぐ ---------- */
:root:root:root {
  --bg: var(--sb-parchment); --surface: var(--sb-canvas); --surface-2: var(--sb-parchment); --surface-3: #ebebef; --track: #e8e8ed;
  --line: var(--sb-hairline); --line-strong: var(--sb-field);
  --fg: var(--sb-ink); --fg-2: var(--sb-ink-soft); --fg-3: var(--sb-muted);
  --accent: var(--sb-action); --accent-ink: #ffffff;
  --primary: var(--sb-action-fill); --primary-fg: #ffffff; --link: var(--sb-action);
  --bar: var(--sb-canvas); --bar-2: var(--sb-parchment); --bar-fg: var(--sb-ink); --bar-fg-2: var(--sb-ink-soft);
  --bar-fg-3: var(--sb-muted); --bar-line: var(--sb-hairline);
  --font-body: var(--sb-font); --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --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; --surface-3: #3a3a3c; --track: #2c2c2e;
  }
}
:root:root:root[data-theme="dark"] { --surface-2: #2c2c2e; --surface-3: #3a3a3c; --track: #2c2c2e; }

/* ---------- 文字 ---------- */
html body { font-family: var(--sb-font); font-size: 17px; }
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 { border-bottom: 1px solid var(--sb-hairline); }
html body .topbar-in { padding-block: 10px; gap: 10px 20px; 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 .mark, html body .logo .mark { width: 32px; height: 32px; background: var(--sb-parchment); color: var(--sb-ink); border: 1px solid var(--sb-hairline); }
html body .brand h1 { font-size: 21px; font-weight: 600; letter-spacing: .231px; }
html body .brand small { font-size: 12px; letter-spacing: .04em; color: var(--sb-muted); }
html body nav a { font-size: 15px; font-weight: 400; color: var(--sb-ink-soft); border-radius: var(--sb-radius-pill); }
html body nav a:hover { background: var(--sb-parchment); color: var(--sb-ink); }
html body nav a[aria-current="page"] { background: var(--sb-action-weak); color: var(--sb-action); font-weight: 600; box-shadow: none; }
html body .viewer { border-color: var(--sb-hairline); color: var(--sb-ink-soft); }

/* ---------- ボタン（丸いボタン。主な操作は青の塗り、ほかは青の枠） ---------- */
html body .btn, html body .topbar .btn {
  min-height: 44px; padding: 0 22px; border-radius: var(--sb-radius-pill);
  border: 1px solid var(--sb-action); background: transparent; color: var(--sb-action);
  font-size: 17px; font-weight: 400; transition: transform .1s;
}
html body .btn:hover, html body .topbar .btn:hover { background: var(--sb-action-weak); color: var(--sb-action); opacity: 1; }
html body .btn:active { transform: scale(.95); }
html body .btn.primary { background: var(--sb-action-fill); border-color: var(--sb-action-fill); color: #ffffff; font-weight: 400; }
html body .btn.primary:hover { background: var(--sb-action-fill); color: #ffffff; filter: brightness(1.08); }
html body .btn.danger { color: var(--crit-text); border-color: currentColor; background: transparent; }
html body .btn.danger:hover { background: var(--crit-soft); }
html body .btn.sm { min-height: 32px; padding: 0 14px; font-size: 14px; }
html body .btn:disabled, html body .btn[disabled] { transform: none; }
html body .iconbtn { border-radius: var(--sb-radius-pill); }
html body .iconbtn:hover { background: var(--sb-parchment); }

/* 切り替え（未完了／完了／すべて） */
html body .seg { background: transparent; border: 1px solid var(--sb-field); border-radius: var(--sb-radius-pill); padding: 0; overflow: hidden; }
html body .seg button { border-radius: 0; font-size: 15px; font-weight: 400; color: var(--sb-ink-soft); }
html body .seg button[aria-pressed="true"] { background: var(--sb-action-fill); color: #ffffff; font-weight: 600; box-shadow: none; }

/* ---------- 入力欄 ---------- */
html body input[type=text], html body input[type=search], html body input[type=date], html body input[type=email],
html body input[type=password], html body input:not([type]), html body select, html body textarea {
  border: 1px solid var(--sb-field); border-radius: var(--sb-radius-sm); background-color: var(--sb-canvas);
}
html body input[type=search] { border-radius: var(--sb-radius-pill); }
html body input:focus, html body select:focus, html body textarea:focus {
  border-color: var(--sb-action-focus); box-shadow: 0 0 0 1px var(--sb-action-focus);
}

/* ---------- 見出し・カード・表・お知らせ ---------- */
html body .pagehead h2 { font-size: 28px; letter-spacing: 0; }
html body .stat { border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius-lg); }
html body .stat[aria-pressed="true"] { border-color: var(--sb-action); box-shadow: inset 0 0 0 1px var(--sb-action); }
html body .stat.warn { border-color: var(--warn-bg); }
html body .stat.warn[aria-pressed="true"] { border-color: var(--warn-fg); box-shadow: none; }
html body .stat .n { font-family: var(--sb-font); font-weight: 600; font-size: 34px; }
html body .stat .l { font-weight: 400; }
html body .tablewrap, html body .wrap { border-radius: var(--sb-radius-lg); }
html body th { font-size: 13px; font-weight: 600; color: var(--sb-muted); background: var(--sb-parchment); }
html body td { font-size: 15px; border-bottom-color: var(--sb-divider); }
html body td.content { font-weight: 600; }
html body .card, html body .add { border-radius: var(--sb-radius-lg); }
html body .card h2 { font-size: 21px; }
html body .notice, html body .err, html body .confirm, html body .mailbox, html body .addbox { border-radius: var(--sb-radius-md); }
html body .numbox { background: var(--sb-parchment); color: var(--sb-ink); border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius-md); }
html body .numbox .lbl { color: var(--sb-muted); }
html body .numbox .note { color: var(--sb-ink-soft); }
html body .toast { box-shadow: none; font-weight: 400; }
html body dialog { border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius-lg); box-shadow: none; }
html body dialog::backdrop { background: rgba(0, 0, 0, .4); }
html body .dlg-head h2 { font-size: 21px; }

/* ---------- ログイン画面（login.html）：左の帯は白、右に入力欄 ---------- */
html body .side { border-right: 1px solid var(--sb-hairline); }
html body .side h1 { font-size: 34px; }
html body .main .btn { width: 100%; justify-content: center; }
/* この画面の「ログイン」は .primary を付けずに主ボタンにしているので、青の塗りにする（.sub は青の枠のまま） */
html body .main .btn:not(.sub) { display: inline-flex; align-items: center; background: var(--sb-action-fill); border-color: var(--sb-action-fill); color: #ffffff; }
html body .main .btn:not(.sub):hover { filter: brightness(1.08); }
html body .head h2 { font-size: 28px; }

/* ---------- 利用者の管理（users.html） ---------- */
html body .topbar-in > a[href="/"] { color: var(--sb-action); border-color: var(--sb-action); border-radius: var(--sb-radius-pill); font-weight: 400; }
html body .topbar-in > a[href="/"]:hover { background: var(--sb-action-weak); color: var(--sb-action); }
html body .tag.admin { background: var(--sb-action-weak); color: var(--sb-action); }
html body .addgrid input, html body .addgrid select, html body .inline input { background: var(--sb-canvas); }
html body .tag { 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; }