/* auth.css — hikari-auth（中央認証Worker）共通UI
   トークン方針：`ヒカリビジネス開発\03_UI設計方針.md` 2章準拠。
   値の出典：primary/accentはLP（`LP\index.html`）のブランドカラーをそのまま採用（hikari-authは
   特定サービスでなくスイート全体の顔になる画面のため、最も公的なブランド値を優先）。
   success/danger等の補助色は経費精算ヒカリ本番実装（public/css/styles.css）の実際の配色を踏襲
   （03_UI設計方針.md記載の値より本番で実際に磨き込まれているため）。
   ※この選定は04_認証UI画面設計.md実装に伴う暫定。03_UI設計方針.mdの色表と完全一致しない点は
   日向さんに別途報告済み。 */

:root {
  --hb-primary: #0EA5B8;
  --hb-primary-deep: #0B8A99;
  --hb-accent: #00D4C8;
  --hb-ink: #0D2B3E;
  --hb-amber: #F59E0B;
  --hb-success: #1F8A5F;
  --hb-success-bg: #DFF3E9;
  --hb-danger: #C1435E;
  --hb-danger-bg: rgba(193, 67, 94, .18);
  --hb-bg: #F4FAFB;
  --hb-surface: #FFFFFF;
  --hb-border: #E2E8F0;
  --hb-text: #0D2B3E;
  --hb-text-sub: #5B7A82;
  --hb-radius: 16px;
  --hb-radius-sm: 10px;
  --hb-shadow: 0 1px 3px rgba(13, 43, 62, .07), 0 1px 2px rgba(13, 43, 62, .04);
  --hb-shadow-lg: 0 16px 32px -8px rgba(13, 43, 62, .22);
  --hb-ease-out: cubic-bezier(.22, 1, .36, 1);
  --hb-dur-fast: 180ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hb-text);
  background: var(--hb-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ------------------------------------------------------------------ */
/* Auth shell — 全画面共通の中央寄せレイアウト＋背景キャンバス            */
/* ------------------------------------------------------------------ */
.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  overflow: hidden;
  background: var(--hb-ink);
}

.auth-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.auth-shell-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.auth-brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, var(--hb-accent) 0%, var(--hb-primary) 60%, var(--hb-ink) 100%);
  box-shadow: 0 0 10px rgba(0, 212, 200, .7);
}
.auth-brand-name { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .06em; }

/* ------------------------------------------------------------------ */
/* Card — glassmorphism（経費精算ヒカリ本番 .auth-card と同系統の質感）    */
/* ------------------------------------------------------------------ */
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--hb-shadow-lg);
}
.auth-card.wide { max-width: 460px; }

.auth-card-title { font-size: 19px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 4px; letter-spacing: .01em; }
.auth-card-sub { font-size: 13px; color: rgba(255, 255, 255, .68); text-align: center; margin-bottom: 24px; line-height: 1.7; }

.auth-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  margin-top: 32px;
}

/* ------------------------------------------------------------------ */
/* Forms                                                                */
/* ------------------------------------------------------------------ */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: var(--hb-radius-sm);
  font-size: 15px;
  color: var(--hb-text);
  background: rgba(255, 255, 255, .94);
  outline: none;
  transition: border-color var(--hb-dur-fast), box-shadow var(--hb-dur-fast);
}
.form-control:focus { border-color: var(--hb-primary); box-shadow: 0 0 0 3px rgba(14, 165, 184, .22); }
.form-hint { font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--hb-radius-sm);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  transition: background var(--hb-dur-fast), box-shadow var(--hb-dur-fast), opacity var(--hb-dur-fast);
  white-space: nowrap;
}
.btn-block { width: 100%; }
.btn-primary { background: var(--hb-primary); color: #fff; box-shadow: 0 6px 16px rgba(14, 165, 184, .32); }
.btn-primary:hover { background: var(--hb-primary-deep); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #fff; color: #3c4043; border: 1px solid rgba(0, 0, 0, .1);
}
.btn-google:hover { background: #f7f7f7; }
.btn-outline {
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .4);
}
.btn-outline:hover { background: rgba(255, 255, 255, .1); }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: rgba(255, 255, 255, .5); font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .2); }

/* ------------------------------------------------------------------ */
/* 状態表示（エラー／成功／ローディング）                                */
/* ------------------------------------------------------------------ */
.auth-error {
  display: none;
  background: var(--hb-danger-bg);
  border: 1px solid rgba(193, 67, 94, .45);
  color: #fff;
  border-radius: var(--hb-radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.auth-error.show { display: block; }

.auth-success-box {
  text-align: center;
}
.auth-success-icon {
  width: 52px; height: 52px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--hb-success-bg);
  color: var(--hb-success);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}

.auth-footer-link { text-align: center; margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.auth-footer-link a { color: #fff; font-weight: 700; text-decoration: underline; }

/* 次に何をすべきかを常に示す（03_UI設計方針.md 3章5項） */
.auth-next-hint {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  text-align: center;
  line-height: 1.8;
}

/* ------------------------------------------------------------------ */
/* 招待受諾カード用の補助表示                                            */
/* ------------------------------------------------------------------ */
.invite-tenant-box {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--hb-radius-sm);
  padding: 16px 18px;
  margin-bottom: 22px;
  text-align: center;
}
.invite-tenant-name { font-size: 17px; font-weight: 700; color: #fff; }
.invite-tenant-role { font-size: 12.5px; color: rgba(255, 255, 255, .65); margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* トースト（アップグレードナッジ等、共通部品に将来昇格予定）              */
/* ------------------------------------------------------------------ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: var(--hb-ink); color: #fff; padding: 12px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 500; box-shadow: var(--hb-shadow-lg); max-width: 300px;
}
.toast.error { border-left: 4px solid var(--hb-danger); }
.toast.success { border-left: 4px solid var(--hb-success); }

/* ------------------------------------------------------------------ */
/* レスポンシブ（03_UI設計方針.md 3章8項のブレークポイント方針に準拠）    */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .auth-card { padding: 28px 22px; border-radius: 18px; }
  .auth-brand-name { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ */
/* 11/14 資料デザインルール：白い背景・ヒカリの5色（#0D5C73・#0A8C9E・#00D4C8・#E6F7F8・#0D1B2A）と白・  */
/* Noto Sans JP・ロゴ。前の暗い背景とガラス風の札を、ここで上書きする（色はこの5色と白だけ）               */
/* ------------------------------------------------------------------ */
:root {
  --hb-c1: #0D5C73;   /* 深い青緑（見出し・ボタン） */
  --hb-c2: #0A8C9E;   /* 青緑（ボタン・リンク） */
  --hb-c3: #00D4C8;   /* 明るい青緑（強調の線） */
  --hb-c4: #E6F7F8;   /* ごく薄い青緑（面） */
  --hb-c5: #0D1B2A;   /* 文字 */
  --hb-primary: var(--hb-c2);
  --hb-primary-deep: var(--hb-c1);
  --hb-accent: var(--hb-c3);
  --hb-ink: var(--hb-c5);
  --hb-text: var(--hb-c5);
  --hb-bg: #FFFFFF;
}
html, body { background: #FFFFFF; color: var(--hb-c5); }
.auth-shell { background: #FFFFFF; }
.auth-bg-canvas { display: none !important; }
.auth-brand .dot { display: none; }
.auth-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.auth-brand-name { color: var(--hb-c1); }
.auth-card {
  background: #FFFFFF; border: 1px solid var(--hb-c4); box-shadow: 0 8px 24px rgba(13, 27, 42, .08);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.auth-card-title { color: var(--hb-c1); }
.auth-card-sub, .form-label, .form-hint, .auth-divider, .auth-footer, .auth-footer-link { color: var(--hb-c5); }
.auth-card p { color: var(--hb-c5); }
.auth-divider::before, .auth-divider::after { background: var(--hb-c4); }
.form-control { background: #FFFFFF; border: 1px solid var(--hb-c4); color: var(--hb-c5); }
.form-control:focus { border-color: var(--hb-c2); box-shadow: 0 0 0 3px var(--hb-c4); }
.btn-primary { background: var(--hb-c2); color: #FFFFFF; box-shadow: none; }
.btn-primary:hover { background: var(--hb-c1); }
.btn-outline { color: var(--hb-c1); border-color: var(--hb-c2); }
.btn-outline:hover { background: var(--hb-c4); }
.auth-footer-link a, .auth-card a:not(.btn) { color: var(--hb-c2); text-decoration: underline; }
.auth-error { color: var(--hb-c5); background: var(--hb-c4); border: 1px solid var(--hb-c2); }
.invite-tenant-box { background: var(--hb-c4); }
.invite-tenant-name { color: var(--hb-c1); }
.invite-tenant-role { color: var(--hb-c5); }

/* 文だけの画面・確かめの画面（pageShell）：段落とボタンの間をあける（11/14・小川の気づき） */
.auth-message p { line-height: 1.8; margin: 12px 0 0; }
.auth-message > form, .auth-message > .btn { display: block; margin-top: 24px; }
.auth-message > p + p { margin-top: 16px; }