/* 公開ログイン・リダイレクト先ログイン共通テーマ */
:root {
  --auth-brand: #247238;
  --auth-brand-strong: #145322;
  --auth-bg: #f3f8f4;
  --auth-surface: #ffffff;
  --auth-text: #1e2b20;
  --auth-muted: #5e6f61;
  --auth-border: #d8e3da;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --auth-brand: #77ce82;
  --auth-brand-strong: #a8e9ae;
  --auth-bg: #112016;
  --auth-surface: #1c2a20;
  --auth-text: #edf7ee;
  --auth-muted: #c0d0c2;
  --auth-border: #3d5141;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --auth-brand: #77ce82;
    --auth-brand-strong: #a8e9ae;
    --auth-bg: #112016;
    --auth-surface: #1c2a20;
    --auth-text: #edf7ee;
    --auth-muted: #c0d0c2;
    --auth-border: #3d5141;
    color-scheme: dark;
  }
}

body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at top, rgba(100, 186, 112, .16), transparent 38%), var(--auth-bg);
  color: var(--auth-text);
}

.auth-page .container {
  /* デスクトップでは余裕のある操作幅、狭い画面では常に画面内に収める。 */
  width: min(100%, 920px);
  max-width: 920px;
}
.auth-login-row { margin: 0; }
.auth-branding { margin-bottom: 24px; }
.auth-mark {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 14px;
  background: var(--auth-brand);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(20, 83, 34, .22);
}
.auth-branding h1 { margin: 0; color: var(--auth-text); font-size: clamp(27px, 5vw, 34px); font-weight: 800; letter-spacing: .01em; }
.auth-branding p { margin: 8px 0 0; color: var(--auth-muted); font-size: 16px; }
.auth-card { border: 1px solid var(--auth-border) !important; border-radius: 16px; background: var(--auth-surface); box-shadow: 0 16px 42px rgba(18, 43, 24, .11); }
.auth-card h2 { margin-bottom: 26px; color: var(--auth-text); font-size: 20px; font-weight: 750; }
.auth-page .form-label { color: var(--auth-text); font-weight: 700; }
.auth-page .form-control { min-height: 46px; border-color: var(--auth-border); border-radius: 9px; background: var(--auth-surface); color: var(--auth-text); font-size: 16px; }
.auth-page .form-control::placeholder { color: var(--auth-muted); opacity: .75; }
.auth-page .form-control:focus { border-color: var(--auth-brand); background: var(--auth-surface); color: var(--auth-text); box-shadow: 0 0 0 3px rgba(36, 114, 56, .19); }
.auth-page a { color: var(--auth-brand-strong); font-weight: 650; }
.auth-page .text-muted { color: var(--auth-muted) !important; }
.auth-page .alert-danger { border-color: #d9827d; background: #fff1f0; color: #7b221d; }
.auth-submit { min-height: 46px; border: 0; border-radius: 9px; background: var(--auth-brand); color: #fff; font-size: 16px; font-weight: 750; }
.auth-submit:hover, .auth-submit:focus { background: var(--auth-brand-strong); color: #102014; }
:root[data-theme="dark"] .auth-submit { color: #102014; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .auth-submit { color: #102014; } }
.auth-admin-link a { text-decoration: none; }
.theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 2; display: inline-flex; min-height: 40px; gap: 7px; align-items: center; padding: 7px 11px; border: 1px solid var(--auth-border); border-radius: 9px; background: var(--auth-surface); color: var(--auth-text); font-size: 14px; font-weight: 700; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--auth-brand); outline: 2px solid rgba(36, 114, 56, .25); outline-offset: 2px; }

:root[data-theme="dark"] .auth-page .alert-danger { border-color: #9e5650; background: #3a201e; color: #ffd6d2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .auth-page .alert-danger { border-color: #9e5650; background: #3a201e; color: #ffd6d2; } }

/* 多要素認証の設定・パスキーの登録など（allauth の画面）の部品も、テーマの配色に合わせる */
.auth-page .auth-card .card { border-color: var(--auth-border); background: transparent; color: var(--auth-text); }
.auth-page .auth-card h1, .auth-page .auth-card h2, .auth-page .auth-card .card-title { color: var(--auth-text); }
.auth-page .table { --bs-table-bg: transparent; --bs-table-color: var(--auth-text); --bs-table-border-color: var(--auth-border); color: var(--auth-text); }
.auth-page .form-text { color: var(--auth-muted); }
.auth-page .btn-outline-secondary,
.auth-page .btn-outline-primary {
  border: 1px solid var(--auth-border) !important;
  background: transparent !important;
  color: var(--auth-text) !important;
}
.auth-page .btn-outline-secondary:hover,
.auth-page .btn-outline-primary:hover { border-color: var(--auth-brand) !important; color: var(--auth-brand-strong) !important; }
/* ボタンの文字と背景が重ならないよう、色を直接指定する（ダークは明るい緑に濃い文字） */
.auth-page .btn-primary {
  border: 1px solid var(--auth-brand) !important;
  background: var(--auth-brand) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.auth-page .btn-primary:hover, .auth-page .btn-primary:focus { background: var(--auth-brand-strong) !important; border-color: var(--auth-brand-strong) !important; }
:root[data-theme="dark"] .auth-page .btn-primary,
:root[data-theme="dark"] .auth-page .btn-primary:hover { color: #102014 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .auth-page .btn-primary,
  :root:not([data-theme]) .auth-page .btn-primary:hover { color: #102014 !important; }
}
/* allauth の入力欄（fields 要素）を、ログイン画面の入力欄と同じ見た目にする */
.auth-page .auth-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.auth-page .auth-card select,
.auth-page .auth-card textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--auth-border);
  border-radius: 9px;
  background: var(--auth-surface);
  color: var(--auth-text);
  font-size: 16px;
}
.auth-page .auth-card input:focus { border-color: var(--auth-brand); outline: none; box-shadow: 0 0 0 3px rgba(36, 114, 56, .19); }
.auth-page .errorlist { margin: 4px 0 0; padding: 0; list-style: none; color: #c0544c; font-size: 14px; }
.auth-page hr { border-color: var(--auth-border); opacity: 1; }
.auth-page .alert-info, .auth-page .alert-success, .auth-page .alert-warning { border-color: var(--auth-border); background: var(--auth-surface); color: var(--auth-text); }
.auth-page code, .auth-page pre { color: var(--auth-text); }

@media (max-width: 575px) {
  body.auth-page { align-items: start; }
  .auth-page .container { padding: 78px 16px 28px !important; }
  .auth-card .card-body { padding: 25px 20px !important; }
  .theme-toggle { top: 12px; right: 12px; }
}