/* bodek_auth.css — styling for the login forgot-link, the Security settings
   page, and the 2FA prompt. Brand tokens mirror bodek_theme (indigo accent,
   system/Inter font, 10px radius, borders over shadows). Theme-aware. */

:root {
  --bk-accent: #4f46e5;
  --bk-accent-hover: #4338ca;
  --bk-text: #1f2330;
  --bk-muted: #6b7280;
  --bk-border: #e5e7eb;
  --bk-surface: #ffffff;
  --bk-surface-2: #f7f8fb;
  --bk-danger: #dc2626;
  --bk-ok: #16a34a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bk-text: #e6e8ee;
    --bk-muted: #9aa1ad;
    --bk-border: #2c2f37;
    --bk-surface: #1b1d22;
    --bk-surface-2: #14161a;
  }
}

/* ---- Login forgot link ---- */
.bodek-forgot-wrap { text-align: right; margin: -6px 0 10px; }
a.bodek-forgot {
  color: var(--bk-accent);
  font-size: 13px;
  text-decoration: none;
}
a.bodek-forgot:hover { text-decoration: underline; }

/* ---- Shared bits ---- */
.bodek-security-page, .bodek-2fa-page { padding: 8px 4px; }
.bodek-security-inner, .bodek-2fa-inner {
  max-width: 640px; margin: 0 auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--bk-text);
}
.bodek-security-inner h2, .bodek-2fa-inner h2 { font-size: 20px; font-weight: 700; margin: 6px 0 16px; }
.bodek-loading, .bodek-err { padding: 20px; color: var(--bk-muted); }
.bodek-err { color: var(--bk-danger); }

.bodek-card {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.bodek-card h3 { font-size: 15px; font-weight: 650; margin: 0 0 4px; }
.bodek-desc { color: var(--bk-muted); font-size: 13px; margin: 0 0 12px; }
.bodek-hint { color: var(--bk-muted); font-size: 12px; margin: 6px 0 0; }

.bodek-field { margin-bottom: 12px; }
.bodek-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.bodek-field input {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; font-size: 14px;
  border: 1px solid var(--bk-border); border-radius: 8px;
  background: var(--bk-surface-2); color: var(--bk-text);
}
.bodek-field input:focus { outline: none; border-color: var(--bk-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

.bodek-btn {
  display: inline-block; cursor: pointer;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--bk-accent);
  border: none; border-radius: 8px;
}
.bodek-btn:hover { background: var(--bk-accent-hover); }
.bodek-btn-link { background: none; color: var(--bk-muted); }
.bodek-btn-link:hover { background: none; color: var(--bk-text); text-decoration: underline; }
.bodek-btn-danger { background: var(--bk-danger); }
.bodek-btn-danger:hover { background: #b91c1c; }

.bodek-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--bk-ok); border: 1px solid var(--bk-ok);
  border-radius: 999px; padding: 1px 8px; margin-left: 4px;
}

.bodek-steps { margin: 0 0 12px; padding-left: 20px; }
.bodek-steps li { margin-bottom: 10px; font-size: 14px; }
.bodek-qr { margin: 8px 0; }
.bodek-qr img { width: 180px; height: 180px; max-width: 100%; border: 1px solid var(--bk-border); border-radius: 8px; background:#fff; padding:6px; }
.bodek-secret {
  display: inline-block; margin-top: 6px; padding: 4px 8px;
  background: var(--bk-surface-2); border: 1px solid var(--bk-border);
  border-radius: 6px; font-family: monospace; font-size: 13px; letter-spacing: 1px;
  word-break: break-all;
}

.bodek-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.bodek-switch input { width: 18px; height: 18px; }

.bodek-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.bodek-msg-ok { background: rgba(22,163,74,.12); color: var(--bk-ok); }
.bodek-msg-err { background: rgba(220,38,38,.12); color: var(--bk-danger); }
.bodek-msg-info { background: var(--bk-surface-2); color: var(--bk-muted); }

/* ---- 2FA prompt ---- */
.bodek-2fa-inner { max-width: 380px; padding-top: 24px; }
.bodek-2fa-logout { margin-top: 18px; font-size: 13px; }
.bodek-2fa-logout a { color: var(--bk-muted); }

/* ---- Unified 2FA methods list (Security page) ---- */
.bodek-2fa-head { display:flex; align-items:center; gap:10px; margin:0 0 4px; }
.bodek-2fa-head h2 { margin:0; }
.bodek-methods { margin-top:16px; }
.bodek-method-group {
  border:1px solid var(--bk-border);
  border-radius:12px;
  background:var(--bk-surface);
  padding:14px 16px;
  margin-bottom:14px;
}
.bodek-method-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.bodek-method-head h3 { margin:0; font-size:15px; font-weight:600; border:0; padding:0; }
.bodek-method-list { list-style:none; margin:12px 0 0; padding:0; }
.bodek-method {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--bk-border); border-radius:10px;
  background:var(--bk-surface-2); margin-bottom:8px;
}
.bodek-method:last-child { margin-bottom:0; }
.bodek-method-icon { font-size:20px; line-height:1; width:24px; text-align:center; }
.bodek-method-info { display:flex; flex-direction:column; flex:1; min-width:0; }
.bodek-method-title { font-weight:600; word-break:break-word; }
.bodek-method-meta { font-size:12px; color:var(--bk-muted); }
.bodek-method-remove { flex:0 0 auto; }
.bodek-empty { color:var(--bk-muted); font-size:13px; margin:12px 0 0; }
.bodek-inline-setup { margin-top:12px; }
.bodek-badge-ok { background:#e6f4ea; color:#137333; }
.bodek-badge-muted { background:var(--bk-surface-2); color:var(--bk-muted); border:1px solid var(--bk-border); }

/* ---- 2FA gate prompt ---- */
.bodek-2fa-block { border:1px solid var(--bk-border); border-radius:12px; background:var(--bk-surface); padding:14px 16px; margin:12px 0; }
.bodek-or { text-align:center; color:var(--bk-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin:6px 0; }
.bodek-btn-primary { background:var(--bk-accent); color:#fff; border-color:var(--bk-accent); }
.bodek-btn-primary:hover { background:var(--bk-accent-hover); border-color:var(--bk-accent-hover); }
.bodek-2fa-logout { margin-top:14px; text-align:center; }