:root {
  --admin-bg: #ffffff;
  --admin-text: #2c3a40;
  --admin-heading: #1b2a30;
  --admin-muted: #5f6e74;
  --admin-accent: #3f7580;
  --admin-line: #cfcdc5;
  --admin-line-soft: #e6e5df;
  --admin-panel: #f6f5f1;
  --admin-notice-bg: #eef6f7;
  --admin-notice-border: #3f7580;
  --admin-error-bg: #fbf0ee;
  --admin-error-border: #b9433a;
  --admin-maxw: 1280px;
  --admin-gutter: 24px;
  --admin-space-1: 4px;
  --admin-space-2: 8px;
  --admin-space-3: 12px;
  --admin-space-4: 16px;
  --admin-space-6: 24px;
  --admin-space-8: 32px;
  --admin-control-h: 36px;
  --radius: 6px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-system: system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-system); font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--admin-text); background: var(--admin-bg); }
a { color: var(--admin-accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--admin-heading); }

/* ヘッダー: 白地に薄い下線。現在地は見出し色の 1px 下線。狭い画面ではナビと利用者名が折り返す */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--admin-space-6); min-height: 52px; padding: 0 var(--admin-gutter); border-bottom: 1px solid var(--admin-line-soft); }
header .brand { font-weight: 600; color: var(--admin-heading); text-decoration: none; white-space: nowrap; }
/* 開いている配備が dev のときの印。色はアラートの赤・黄・緑と重ならない紫。本番は何も出さない */
header .env { margin-left: calc(-1 * var(--admin-space-3)); padding: 0 var(--admin-space-2); border-radius: var(--radius); font-size: 0.75rem; font-weight: 600; line-height: 20px; white-space: nowrap; background: #6929c4; color: #ffffff; }
header nav { display: flex; flex-wrap: wrap; gap: 0 var(--admin-space-4); }
header nav a { position: relative; color: var(--admin-text); text-decoration: none; padding: 14px 0; white-space: nowrap; }
header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--admin-heading); transform: scaleX(0); transition: transform .2s var(--ease); }
header nav a:hover::after, header nav a[aria-current="page"]::after { transform: none; }
header .user { margin-left: auto; color: var(--admin-muted); font-size: 0.875rem; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--admin-space-3); }
header form { display: inline; }
header button { height: 28px; padding: 0 12px; font-size: 0.875rem; background: transparent; color: var(--admin-text); border-color: var(--admin-muted); }
header button:hover { background: var(--admin-panel); color: var(--admin-text); border-color: var(--admin-heading); }

/* 画面の中のタブ: 各画面へのリンク。現在地は見出し色の 2px 下線 */
nav.tabs { display: flex; flex-wrap: wrap; gap: 0 var(--admin-space-6); margin: 0 0 var(--admin-space-6); border-bottom: 1px solid var(--admin-line); }
nav.tabs a { color: var(--admin-text); text-decoration: none; padding: var(--admin-space-2) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; }
nav.tabs a:hover { color: var(--admin-heading); border-bottom-color: var(--admin-line); }
nav.tabs a[aria-current="page"] { color: var(--admin-heading); border-bottom-color: var(--admin-heading); }
nav.tabs + form > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ログの全文のポップアップ(HTML の popover)。開くボタンは切った本文をそのまま見せる */
button.popup-open { display: block; width: 100%; height: auto; padding: var(--admin-space-1) var(--admin-space-2); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; text-align: left; white-space: pre-wrap; word-break: break-all; color: var(--admin-text); background: var(--admin-panel); border: 0; border-radius: var(--radius); cursor: pointer; }
button.popup-open:hover { color: var(--admin-accent); background: var(--admin-panel); text-decoration: underline; }
[popover] { width: min(48rem, calc(100vw - 2 * var(--admin-gutter))); max-height: 80vh; padding: var(--admin-space-4); color: var(--admin-text); background: var(--admin-bg); border: 1px solid var(--admin-line); border-radius: var(--radius); }
[popover]::backdrop { background: rgb(0 0 0 / 0.3); }
[popover] pre { min-width: 0; margin: 0 0 var(--admin-space-3); padding: var(--admin-space-3) var(--admin-space-4); }

/* 本文 */
main { max-width: var(--admin-maxw); margin: 0 auto; padding: var(--admin-space-6) var(--admin-gutter) 64px; }
h1 { font-size: 1.5rem; line-height: 1.4; font-weight: 500; color: var(--admin-heading); margin: 0 0 var(--admin-space-4); }
h2 { font-size: 1.125rem; line-height: 1.5; font-weight: 500; color: var(--admin-heading); margin: var(--admin-space-8) 0 var(--admin-space-2); padding-top: var(--admin-space-4); border-top: 1px solid var(--admin-line); }
h3 { font-size: 1rem; font-weight: 500; color: var(--admin-heading); margin: var(--admin-space-4) 0 var(--admin-space-2); }
p { margin: 0 0 var(--admin-space-3); }
strong { font-weight: 600; color: var(--admin-heading); }
small { font-size: 0.875rem; color: var(--admin-muted); }
code { font-family: var(--font-mono); font-size: 0.875rem; background: var(--admin-panel); padding: 1px 5px; border-radius: 3px; }
pre { font-family: var(--font-mono); font-size: 0.875rem; background: var(--admin-panel); padding: var(--admin-space-3) var(--admin-space-4); border-radius: var(--radius); white-space: pre-wrap; word-break: break-all; }

/* 表: 縦罫線なし。行は罫線で区切り、見出し行の下だけ濃い線 */
table { width: 100%; border-collapse: collapse; margin: var(--admin-space-2) 0 var(--admin-space-4); }
th, td { text-align: left; vertical-align: top; padding: var(--admin-space-2) var(--admin-space-3); border: 0; border-bottom: 1px solid var(--admin-line); }
thead th { font-size: 0.875rem; line-height: 1.4; letter-spacing: 0.06em; font-weight: 500; color: var(--admin-muted); white-space: nowrap; border-bottom-color: var(--admin-muted); padding-top: var(--admin-space-1); }
/* 並べ替えできる列見出しはリンクの見た目のまま(押せない見出しと見分ける) */
thead th a { color: var(--admin-accent); }
/* 項目と値の 2 列表(thead が無い表): 項目名は見出し色で幅 32% */
table:not(:has(thead)) th { width: 32%; font-weight: 500; color: var(--admin-heading); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 監査ログの変更前後の JSON のように、空白の無い長い値が表を横に広げないよう、どこででも折り返せるようにする */
td code { overflow-wrap: anywhere; }
/* 表の中の JSON(監査ログの変更前後・イベントの本文)は pre。列が潰れないよう幅の下限を持つ */
td pre { margin: 0; min-width: 16rem; padding: var(--admin-space-1) var(--admin-space-2); }
/* 狭い画面では列の多い表を表の中だけ横に動かす(ページ全体を横に広げない) */
@media (max-width: 720px) {
  table { display: block; overflow-x: auto; }
}

/* 定義リスト */
dt { font-weight: 500; color: var(--admin-heading); margin-top: var(--admin-space-3); }
dd { margin: 0; }

/* お知らせと失敗: 枠と淡い地 */
.notice, .error { padding: var(--admin-space-3) var(--admin-space-4); margin: var(--admin-space-4) 0; border: 1px solid; border-radius: var(--radius); }
.notice { background: var(--admin-notice-bg); border-color: var(--admin-notice-border); }
.error { background: var(--admin-error-bg); border-color: var(--admin-error-border); }
.notice p, .error p { margin: 0; }

/* 絞り込み: 淡い面に、ラベルを入力の上に置いて折り返す */
form.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--admin-space-3) var(--admin-space-6); padding: var(--admin-space-4); margin: 0 0 var(--admin-space-4); background: var(--admin-panel); border-radius: var(--radius); }
form.filter label { display: flex; flex-direction: column; gap: var(--admin-space-1); min-width: 0; max-width: 100%; font-size: 0.875rem; letter-spacing: 0.06em; color: var(--admin-muted); }
form.filter label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: var(--admin-space-2); min-height: var(--admin-control-h); font-size: 1rem; letter-spacing: 0; color: var(--admin-text); }
form.filter a { align-self: center; font-size: 0.875rem; }

/* 入力 */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  font: inherit; font-size: 1rem; line-height: 1.5; letter-spacing: 0; color: var(--admin-text); background: var(--admin-bg);
  border: 1px solid var(--admin-muted); border-radius: var(--radius); padding: 5px 10px; min-height: var(--admin-control-h); max-width: 100%;
}
select { padding-right: 28px; }
textarea { min-height: 80px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--admin-accent); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--admin-accent); width: 16px; height: 16px; margin: 0; }
fieldset { border: 1px solid var(--admin-line); border-radius: var(--radius); padding: var(--admin-space-3) var(--admin-space-4) var(--admin-space-4); margin: 0 0 var(--admin-space-4); min-width: 0; }
legend { font-size: 0.875rem; letter-spacing: 0.06em; color: var(--admin-muted); padding: 0 var(--admin-space-1); }
form:not(.filter) label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-2); max-width: 100%; margin: 0 var(--admin-space-4) var(--admin-space-2) 0; }
form:not(.filter) label:has(textarea) { display: flex; align-items: flex-start; }
/* size・cols の広い入力が狭い画面からはみ出さない */
form label > input, form label > select, form label > textarea { min-width: 0; }

/* ボタン: 主(塗り)・副(.secondary 輪郭)・取り消せない操作(.danger) */
button { font: inherit; letter-spacing: 0; font-weight: 500; height: var(--admin-control-h); padding: 0 var(--admin-space-4); border-radius: var(--radius-pill); border: 1px solid var(--admin-heading); background: var(--admin-heading); color: var(--admin-bg); cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
button:hover { background: var(--admin-accent); border-color: var(--admin-accent); }
button.secondary { background: transparent; color: var(--admin-heading); border-color: var(--admin-muted); }
button.secondary:hover { background: transparent; color: var(--admin-heading); border-color: var(--admin-heading); }
button.danger { background: transparent; color: var(--admin-error-border); border-color: var(--admin-error-border); }
button.danger:hover { background: var(--admin-error-bg); color: var(--admin-error-border); border-color: var(--admin-error-border); }
button + button, button + a, form + form { margin-left: var(--admin-space-2); }
td button, td form { margin: 0; }
td button { height: 28px; padding: 0 12px; font-size: 0.875rem; }
/* 詳細の画面のフォーム(変えられる値はその場の入力欄)の「保存する」。値を変えたときだけ出し、長い画面でも画面の下に貼り付ける */
.savebar { position: sticky; bottom: 0; display: flex; gap: var(--admin-space-2); margin-top: var(--admin-space-6); padding: var(--admin-space-3) 0; background: var(--admin-bg); border-top: 1px solid var(--admin-line); }
.savebar button { margin: 0; }
/* 変更が無いあいだは隠す(/ui.js が hidden を付け外しする。JS が動かなければ常に出る) */
.savebar[hidden] { display: none; }

/* 開閉 */
details { border-top: 1px solid var(--admin-line); margin: var(--admin-space-4) 0; }
summary { cursor: pointer; padding: var(--admin-space-2) 0; font-weight: 500; color: var(--admin-heading); }