/* アカウント系Djangoテンプレートを設定画面風のグレー基調に寄せる。 */
body.account-ui {
  --account-ui-bg: #f3f4f6;
  --account-ui-surface: #ffffff;
  --account-ui-surface-elevated: #f9fafb;
  --account-ui-text-primary: #27272a;
  --account-ui-text-secondary: #68707a;
  --account-ui-border: #d9dde3;
  --account-ui-main: #3f3f46;
  --account-ui-main-hover: #27272a;
  --account-ui-accent: #18181b;
  --account-ui-shadow-card: 0 14px 34px rgba(24, 24, 27, 0.07);
  --account-ui-focus: rgba(63, 63, 70, 0.24);

  --color-bg: var(--account-ui-bg);
  --color-surface: var(--account-ui-surface);
  --color-surface-elevated: var(--account-ui-surface-elevated);
  --color-text-primary: var(--account-ui-text-primary);
  --color-text-secondary: var(--account-ui-text-secondary);
  --color-main: var(--account-ui-main);
  --color-accent: var(--account-ui-accent);
  --color-border: var(--account-ui-border);
  --shadow-card: var(--account-ui-shadow-card);

  background: var(--account-ui-bg);
  color: var(--account-ui-text-primary);
}

body.account-ui main {
  background: var(--account-ui-bg);
}

body.account-ui img[alt="Shumeikan"] {
  filter: grayscale(1) contrast(1.08);
  opacity: 0.92;
}

/* チェックボックス／ラジオを除外する。@tailwindcss/forms は checked の見た目を
   background-color（currentColor）と background-image（チェック印）で作るため、
   ここで background を !important 指定すると checked にしても見た目が変わらなくなる。 */
body.account-ui input:not([type="checkbox"]):not([type="radio"]),
body.account-ui textarea,
body.account-ui select {
  background: var(--account-ui-surface-elevated) !important;
  border-color: var(--account-ui-border) !important;
  color: var(--account-ui-text-primary) !important;
}

/* チェックボックス／ラジオは枠色だけ合わせ、checked の塗りは currentColor に任せる */
body.account-ui input[type="checkbox"],
body.account-ui input[type="radio"] {
  border-color: var(--account-ui-border) !important;
  color: var(--account-ui-main);
}

body.account-ui input:focus,
body.account-ui textarea:focus,
body.account-ui select:focus {
  border-color: var(--account-ui-main) !important;
  box-shadow: 0 0 0 3px var(--account-ui-focus) !important;
}

body.account-ui input::placeholder,
body.account-ui textarea::placeholder {
  color: #8b929d;
}

body.account-ui button[style*="background: var(--color-main)"],
body.account-ui a[style*="background: var(--color-main)"],
body.account-ui .mfa-button {
  background: var(--account-ui-main) !important;
  border-color: var(--account-ui-main) !important;
  color: #ffffff !important;
}

body.account-ui button[style*="background: var(--color-main)"]:hover,
body.account-ui a[style*="background: var(--color-main)"]:hover,
body.account-ui .mfa-button:hover {
  background: var(--account-ui-main-hover) !important;
  border-color: var(--account-ui-main-hover) !important;
  opacity: 1 !important;
}

body.account-ui a[style*="--color-text-secondary"],
body.account-ui .mfa-button-secondary {
  color: var(--account-ui-text-secondary) !important;
}

body.account-ui .mfa-button-secondary {
  background: var(--account-ui-surface-elevated) !important;
  border-color: var(--account-ui-border) !important;
}

body.account-ui .mfa-button-danger {
  color: var(--color-danger) !important;
  background: var(--color-danger-bg) !important;
  border-color: var(--color-danger-border) !important;
}