/* モバイル優先。PC では中央に最大 720px 幅で表示する */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1c1f23;
  --muted: #6b7280;
  --line: #e2e5ea;
  --accent: #2563eb;
  --danger: #dc2626;
  --ok: #16a34a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI",
               "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.header {
  padding: 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.header h1 { margin: 0; font-size: 1.1rem; }

/* ダウンロード画面の見出し。ロゴだけを置く（画面の名前は添えない） */
.brand { line-height: 0; }

/* ロゴの右に画面の名前を置く見出し（管理画面・ファイル・設定）。
   管理画面でどのページを見ているかは、下の admin-nav の current が示す */
.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 画面の名前が縦に割れるのを防ぐ。右のリンクも同様に、
   縮められるくらいなら header-main の折り返しに任せる */
.brand-row span,
.header-main > .link { white-space: nowrap; }

/* ロゴの寸法はどの画面でも揃える。
   高さを決めて幅は成り行き。狭い画面で収まらないときは max-width が効くが、
   そのとき縦横比が崩れないよう object-fit: contain を添えている */
.brand img,
.brand-row img {
  display: block;
  height: 40px;
  width: auto;
  max-width: min(220px, 60vw);
  object-fit: contain;
  object-position: left center;
}
.header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  /* 狭い画面（320px など）で、見出しと右のリンクが1行に収まらないとき。
     文字を折り返して潰すのではなく、リンクを次の行へ送る */
  flex-wrap: wrap;
}
.header-main .link { padding: 0; }

/* ログイン・サインアップなどの画面 */
.login-main { min-height: 100dvh; justify-content: center; }
.login-title { margin: 0; font-size: 1.15rem; }
.login-main .message { white-space: pre-wrap; }
.auth-links {
  margin: 14px 0 0;
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
}
.auth-links a { color: var(--accent); }

/* 利用規約の本文 */
.terms-body {
  max-height: 60dvh;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.7;
}
.terms-body h2 { font-size: 0.95rem; margin: 16px 0 4px; }
.terms-body h2:first-child { margin-top: 0; }
.terms-body p { margin: 4px 0; }
.terms-body li { margin-left: 1.2em; }

/* パスワード強度メーター */
.strength { margin-top: 8px; }
.strength-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.strength-value {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--danger);
  transition: width 0.2s linear, background-color 0.2s linear;
}
.strength[data-score="2"] .strength-value { background: #d97706; }
.strength[data-score="3"] .strength-value { background: #65a30d; }
.strength[data-score="4"] .strength-value { background: var(--ok); }
.strength-label { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.strength-missing {
  margin: 4px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 0.8rem;
}
.note { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; }

.main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.card h2 { margin: 0 0 12px; font-size: 0.95rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-head h2 { margin: 0 0 12px; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 8px 0 4px; }

input, select, button {
  font-family: inherit;
  font-size: 16px; /* 16px 未満だと iOS Safari が自動ズームする */
}

/* 文字を打ち込む入力欄はすべて同じ体裁にする。
   チェックボックスは対象外（下の .checkbox input で別に指定する） */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

textarea {
  font-family: inherit;
  font-size: 16px; /* iOS Safari の自動ズーム防止 */
  line-height: 1.5;
  resize: none;          /* 高さは入力内容に合わせて JS が調整する */
  overflow-y: hidden;    /* 上限に達したら JS が auto へ切り替える */
  min-height: 0;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--text);
  font-size: 0.9rem;
}
.checkbox input { width: 18px; height: 18px; margin: 0; }

.row { display: flex; gap: 12px; }
.col { flex: 1; min-width: 0; }

button[type="submit"] {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
button[type="submit"]:disabled { background: #9aa8c7; cursor: default; }

.link {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0 0 12px;
  font-size: 0.85rem;
}

/* 結果表示。本文は内容に応じて縮み、4行を超えた分はこの中でスクロールする。
   導線ボタンは出番が無いときも場所を確保する（表示のたびに下の要素が動かないように） */
.message {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: #eef2ff;
  color: #1e3a8a;
  white-space: pre-wrap;
}
.message.error { background: #fef2f2; color: var(--danger); }

/* 本文と導線ボタンを内側に持つ形（index.html の #message）だけに付ける。
   容器のまま white-space: pre-wrap にしておくと、要素と要素のあいだにある
   HTML のインデントや改行が「空行」として描画されてしまい、
   中身の長さに関係なく箱が約130px 高いままになる。
   折り返しの指定は、実際に文字が入る .message-text だけに持たせる。
   単独で使う <p class="message"> は従来どおり .message 側の指定が効く */
.message-with-action { white-space: normal; }

.message-text {
  line-height: 1.4;
  max-height: 5.6em;      /* 4行分。内容が短ければ縮み、超えたらスクロールする */
  overflow-y: auto;
  white-space: pre-wrap;  /* 改行を残すのはこの中だけ */
}

.message-action {
  display: block;
  height: 1.7rem;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
/* 出番が無いときも場所は確保しておく（高さを変えないため） */
.message-action.is-hidden { visibility: hidden; }

/* ジョブ履歴の折りたたみ */
summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 2px 0;
}
summary::-webkit-details-marker { color: var(--muted); } /* Safari */
.count { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.hint { color: var(--muted); font-size: 0.8rem; padding-bottom: 12px; }
.head-actions { display: flex; gap: 14px; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list .empty { color: var(--muted); font-size: 0.9rem; }

.item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
/* [状態バッジ][タイトル]…[非表示] を1行に並べ、非表示ボタンは右端に寄せる */
.item-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.95rem;
  /* 日本語は禁則処理に任せ、URL のような長い英数字だけ途中で折る
     （break-all だと句読点の前などで不自然に切れる） */
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
.item-name { flex: 1; min-width: 0; }

.btn-hide {
  flex: none;
  /* 幅は内容に任せる。余白は .badge と同じ値にして見た目をそろえる */
  padding: 1px 8px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.6;
  cursor: pointer;
}
.btn-hide:disabled { opacity: 0.5; cursor: default; }
.item-meta {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
.item-actions { display: flex; gap: 8px; margin-top: 8px; }
.item-actions a, .item-actions button {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  cursor: pointer;
}
.item-actions .danger { color: var(--danger); }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--line);
  color: var(--muted);
  flex: none;
}
.badge.completed { color: var(--ok); border-color: #bbf7d0; background: #f0fdf4; }
.badge.failed { color: var(--danger); border-color: #fecaca; background: #fef2f2; }
.badge.running { color: var(--accent); border-color: #bfdbfe; background: #eff6ff; }

/* ===== 進行中のジョブ（円形ゲージ） ===== */
/* 進行中は件数が並ぶため、1件あたりの高さを詰める */
.active-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}
.active-body { flex: 1; min-width: 0; }
.active-title {
  font-size: 0.85rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-meta { color: var(--muted); font-size: 0.75rem; line-height: 1.3; }

.gauge { flex: none; width: 40px; height: 40px; }
.gauge-track { fill: none; stroke: var(--line); stroke-width: 4; }
.gauge-value {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  /* 12時の位置から時計回りに伸ばす */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 0.3s linear;
}
.gauge-text {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}
.gauge-mark {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 待機中: 目盛りを出さず、薄い円のまま */
.active-item.queued .gauge-value { stroke: transparent; }
.active-item.queued .gauge-text { fill: var(--muted); font-size: 11px; }

/* 完了: チェックマークに切り替える */
.active-item.completed .gauge-value { stroke: var(--ok); }
.active-item.completed .gauge-mark { stroke: var(--ok); }

/* 失敗: 赤い円と × */
.active-item.failed .gauge-value { stroke: var(--danger); }
.active-item.failed .gauge-mark { stroke: var(--danger); }
.active-item.failed .active-meta { color: var(--danger); }

/* 中止: 灰色の円と × */
.active-item.canceled .gauge-value { stroke: var(--muted); }
.active-item.canceled .gauge-mark { stroke: var(--muted); }

/* ===== バッチ（まとめて投入した分）のカード ===== */
.batch-item {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.batch-head { display: flex; align-items: flex-start; gap: 8px; }
.batch-title {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

.bar {
  height: 6px;
  margin: 8px 0 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.bar-value {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s linear;
}
.batch-item.done .bar-value { background: var(--ok); }
.batch-item.problem .bar-value { background: var(--danger); }

/* 処理中のタイトル。同時実行数ぶんの高さを常に確保し、
   件数が変わってもカードの高さが動かないようにする */
.batch-current {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  height: calc(var(--current-rows, 2) * 1.35em);
  overflow-y: auto;
}
.batch-current li {
  display: flex;
  gap: 8px;
  padding: 1px 0;
  color: var(--text);
}
.batch-current .percent { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.batch-current .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-current .waiting { color: var(--muted); }

.batch-meta { color: var(--muted); font-size: 0.75rem; margin-top: 4px; }
.batch-details { margin-top: 6px; }
.batch-details summary { font-size: 0.85rem; font-weight: 400; color: var(--accent); }
.batch-jobs { margin-top: 8px; gap: 6px; }
.batch-jobs .job-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.batch-jobs .job-row .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gauge-sm { flex: none; width: 28px; height: 28px; }
.gauge-sm .gauge-text { font-size: 13px; }

/* 中止ボタン */
.btn-cancel {
  flex: none;
  padding: 1px 8px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--danger);
  font-size: 0.75rem;
  line-height: 1.6;
  cursor: pointer;
}
.btn-cancel:disabled { opacity: 0.5; cursor: default; }

.error-log {
  margin: 8px 0 0;
  padding: 8px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

/* ===== 管理画面（フェーズ4） ===== */
.admin-nav {
  display: flex;
  gap: 4px;
  max-width: 720px;
  margin: 10px auto 0;
  /* 横幅の狭い端末でも収まらない場合は横スクロールさせる */
  overflow-x: auto;
}
.admin-nav a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.admin-nav a.current {
  color: var(--accent);
  border-color: #bfdbfe;
  background: #eff6ff;
  font-weight: 600;
}

.card h3.sub {
  margin: 20px 0 8px;
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* 数値のカード。狭い画面では2列、広い画面では3〜4列に並ぶ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.stat {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.stat-label { color: var(--muted); font-size: 0.75rem; }
.stat-value { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note { color: var(--muted); font-size: 0.75rem; }

/* 体裁は input[type="text"] の共通指定に任せ、ここでは余白だけ足す */
.filter { margin-bottom: 12px; }

/* 一覧の行。タップできることが分かるようにする */
.user-row { cursor: pointer; }
.user-row:hover { border-color: #bfdbfe; background: #f8fafc; }

/* 容量の使用率バー（.bar / .bar-value は進捗表示と共用） */
.bar-value.warn { background: #d97706; }
.bar-value.over { background: var(--danger); }

.card-head .hint { padding-bottom: 0; }
code { font-size: 0.85em; word-break: break-all; }

/* 管理画面へのリンク（管理者のときだけ JS が差し込む） */
.admin-link { font-weight: 600; }

/* ===== ページングと期間の絞り込み（フェーズ4-A） ===== */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.pager-btn {
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
}
.pager-btn:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
.pager-info {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.filter-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.filter-actions .link { padding: 0; }

/* iOS Safari の日付欄は既定だと高さが揃わないため、行の高さを明示する */
input[type="date"] { min-height: 44px; }

/* ===== システム設定・ツール管理（フェーズ4-B） ===== */
/* 設定のキー名。説明のすぐ下に小さく添える */
.setting-key {
  margin: 2px 0 0;
  padding-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
}
.setting-extra { font-family: inherit; }

/* 設定の入力欄どうしの間隔（項目が続くため詰まって見えないように） */
#general-fields > label:not(.checkbox),
#password-fields > label:not(.checkbox) { margin-top: 14px; }
#general-fields > .checkbox,
#password-fields > .checkbox { margin-top: 14px; }

/* 更新の進行状況 */
.update-status {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.update-status .hint { padding-bottom: 0; }
.update-status .error-log { margin-top: 8px; }

/* ===== 監査ログ・規約の編集（フェーズ4-C） ===== */
/* detail（jsonb）は補助情報なので、本文より控えめに出す */
.log-detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

/* 規約の本文を書く欄。長いのでスクロールさせる */
#body {
  min-height: 40dvh;
  resize: vertical;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;  /* iOS Safari の自動ズーム防止 */
  line-height: 1.6;
}

/* 公開の注意書き。既定の .message より目立たせる */
#publish-warning {
  background: #fffbeb;
  color: #92400e;
}

/* 規約の本文を折りたたんで見せる部分 */
#versions .error-log {
  max-height: 40dvh;
  overflow-y: auto;
}

/* ===== 下部ナビ（フェーズ5・要件 6.2） ===== */
/* ホーム画面から起動すると戻るボタンが無いため、常に行き先を出しておく */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  /* iPhone のホームバーに重ならないようにする（要件 6.3） */
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.7rem;
  /* タップしたときの青いちらつきを消す */
  -webkit-tap-highlight-color: transparent;
}
.tab-icon { width: 24px; height: 24px; fill: currentColor; }
.tab.current { color: var(--accent); font-weight: 600; }

/* 下部ナビがある画面は、その分だけ本文の下に余白を足す */
body:has(.tabbar) .main {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* ===== 容量ゲージ（U-20・要件 6.2） ===== */
.quota {
  max-width: 720px;
  margin: 10px auto 0;
}
.quota-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.quota-value {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s linear, background-color 0.3s linear;
}
.quota-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
/* 使い切る前に気づけるよう、7割で色を変える */
.quota[data-level="warn"] .quota-value { background: #d97706; }
.quota[data-level="over"] .quota-value,
.quota[data-level="full"] .quota-value { background: var(--danger); }
.quota[data-level="full"] .quota-label { color: var(--danger); }

/* 入力欄の右に単位を添える（有効日数など） */
.field-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-unit input { flex: 1; min-width: 0; }
.field-unit .unit {
  flex: none;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* 取り消せない操作のボタン（利用者の削除など）。
   目立たせるが、既定の送信ボタンと同じ青にはしない */
.danger-button {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: #fff;
  color: var(--danger);
  font-weight: 600;
  cursor: pointer;
}
.danger-button:disabled { opacity: 0.5; cursor: default; }