/* 設定画面・同期の表示・認証画面・返信できないときの表示
   ★見た目の設定は css/ の番号順に読み込む（base.html）。後の番号ほど優先される。
   ★2026-10-09 に style.css を順番を変えずに切り分けたもの（つなぐと元と同じ）。 */

/* 設定画面 */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
}

.settings-card {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  padding: 20px;
}

.settings-card-wide { grid-column: 1 / -1; }

.settings-card h2 { font-size: 15px; margin: 0 0 12px; color: #1f3a5f; }

.settings-card label {
  display: block;
  font-size: 13px;
  color: #44505e;
  margin-bottom: 12px;
}

.settings-card input[type="text"], .settings-card input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #c4ccd6;
  border-radius: 6px;
}

.settings-note { font-size: 13px; color: #5a6573; }
.settings-warning { font-size: 12px; color: #9a6700; background: #fff8e6; border: 1px solid #f0dca8; border-radius: 6px; padding: 8px 10px; }
.settings-subhead { font-size: 15px; font-weight: 600; color: #2a3340; margin: 4px 0 12px; }

/* AI翻訳：最初に貼る指示（読むだけの欄・コピーボタンで写す） */
.claude-setup { display: block; width: 100%; margin: 0 0 8px; padding: 8px 10px; font-family: inherit; font-size: 13px;
  line-height: 1.6; color: #37414b; background: #f7f9fb; border: 1px solid #d4dbe3; border-radius: 6px; resize: vertical; }
#claude-setup-copy { margin: 0 8px 16px 0; }

/* スマホ通知（2026-10-12） */
.push-state { margin: 4px 0 10px; font-size: 14px; font-weight: 600; color: #6b7684; }
.push-state-on { color: #1a7f37; }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.push-actions button { margin: 0; }
.push-actions [hidden] { display: none !important; }   /* ボタンの見た目の設定より「隠す」を優先 */
.settings-link { display: inline-block; margin-top: 4px; font-size: 12px; color: #2d6cdf; text-decoration: none; }
.settings-link:hover { text-decoration: underline; }

/* 新着メッセージの自動更新インジケータ */
.new-mail-badge { align-self: center; padding: 3px 8px; border-radius: 10px; font-size: 12px;
  line-height: 1.2; background: #e8f0ff; color: #2d6cdf; border: 1px solid #b9d2ff; white-space: nowrap; }

/* 最終同期と同期完了メッセージを縦に2行で並べる */
.sync-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.3; min-width: 0; }
.last-synced { font-size: 11px; color: #8a93a0; white-space: nowrap; }

.sync-status { font-size: 11px; white-space: nowrap; }
.sync-status-ok { color: #1a7f37; }
.sync-status-error { color: #b42318; }

.input-small { width: auto !important; display: inline-block !important; padding: 6px 8px !important; }

.rename-form { display: flex; gap: 6px; align-items: center; }

.add-account-form { display: flex; gap: 8px; margin-top: 14px; align-items: center; }

.col-actions-wide { width: 170px; white-space: nowrap; }

/* eBay認証画面 */
.auth-steps { font-size: 14px; line-height: 1.9; padding-left: 22px; }
.auth-steps li { margin-bottom: 18px; }
.auth-step-action { margin-top: 8px; display: flex; gap: 10px; align-items: center; }
.auth-url-input { flex: 1; padding: 9px 10px; font-size: 13px; border: 1px solid #c4ccd6; border-radius: 6px; }

.reply-placeholder {
  margin-top: 24px;
  padding: 14px;
  border: 1px dashed #c4ccd6;
  border-radius: 8px;
  font-size: 13px;
  color: #5a6573;
  background: #fbfcfd;
  text-align: center;
}