/* Admin access gear -> flow chart modal */
.top-login-trigger{position:relative}
.top-login-trigger::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#7c3aed;right:7px;top:7px;box-shadow:0 0 0 2px #fff}

.login-flow-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  background:rgba(15,23,42,.48);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:88px 18px 24px;
  overflow:auto;
}
.login-flow-overlay.is-open{display:flex;animation:flowFadeIn .18s ease}

.login-flow-card{
  width:min(720px,100%);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.85);
  border-radius:24px;
  box-shadow:0 30px 90px rgba(15,23,42,.28);
  overflow:hidden;
  color:#172033;
}
.login-flow-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px 16px;
  background:linear-gradient(135deg,#f7f5ff,#fff)
}
.login-flow-eyebrow{font-size:.68rem;letter-spacing:.14em;font-weight:900;color:#7c3aed}
.login-flow-head h3{margin:2px 0 2px;font-size:clamp(1.2rem,2.4vw,1.65rem);font-weight:900}
.login-flow-head p{margin:0;color:#64748b;font-size:.82rem}
.login-flow-close{
  width:38px;height:38px;border:1px solid #e2e8f0;background:#fff;border-radius:12px;
  color:#64748b;display:grid;place-items:center;cursor:pointer;flex:0 0 38px
}
.login-flow-close:hover{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}

.login-flow-path{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  border-top:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7
}
.login-flow-node{
  width:100%;min-height:76px;border:1px solid #e5e7eb;background:#fff;border-radius:17px;
  padding:12px 13px;display:flex;align-items:center;gap:11px;text-align:left;transition:.18s;
  box-shadow:0 8px 22px rgba(15,23,42,.05);cursor:pointer;font:inherit;color:inherit
}
.login-flow-node:hover{transform:translateY(-2px);border-color:#c4b5fd;box-shadow:0 14px 28px rgba(124,58,237,.12)}
.login-flow-node .node-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 42px;font-size:1rem}
.login-node .node-icon{background:#ede9fe;color:#7c3aed}
.reset-node .node-icon{background:#e0f2fe;color:#0369a1}
.login-flow-node strong{display:block;font-size:.96rem}
.login-flow-node small{display:block;color:#64748b;font-size:.72rem;margin-top:2px}
.node-arrow{margin-left:auto;color:#94a3b8;font-size:.8rem}
.flow-line{height:2px;width:28px;background:linear-gradient(90deg,#c4b5fd,#93c5fd);position:relative}
.flow-line::after{content:'›';position:absolute;right:-5px;top:-11px;color:#8b5cf6;font-size:20px}

.login-flow-panel{
  margin:18px 24px 24px;padding:20px;border:1px solid #e2e8f0;border-radius:18px;
  background:#fafbff;box-shadow:inset 0 1px 0 #fff
}
.panel-title{display:flex;gap:11px;align-items:center;margin-bottom:16px}
.panel-title>i{width:40px;height:40px;border-radius:12px;background:#ede9fe;color:#7c3aed;display:grid;place-items:center}
.panel-title strong{display:block;font-size:1rem}
.panel-title small{display:block;color:#64748b;font-size:.74rem;margin-top:2px}

/* Prevent the page behind the dialog from scrolling while it is open. */
body.login-flow-active{overflow:hidden}

[data-theme="dark"] .login-flow-card{background:#0f1d2d;color:#e6edf5;border-color:#26384b}
[data-theme="dark"] .login-flow-head{background:linear-gradient(135deg,#121b31,#0f1d2d)}
[data-theme="dark"] .login-flow-head p,
[data-theme="dark"] .login-flow-node small,
[data-theme="dark"] .panel-title small{color:#94a3b8}
[data-theme="dark"] .login-flow-path{border-color:#26384b}
[data-theme="dark"] .login-flow-node,
[data-theme="dark"] .login-flow-panel{background:#142437;border-color:#304459}
[data-theme="dark"] .login-flow-close{background:#172235;color:#cbd5e1;border-color:#304459}

@keyframes flowFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:650px){
  .login-flow-overlay{padding:68px 10px 18px}
  .login-flow-card{border-radius:20px}
  .login-flow-path{grid-template-columns:1fr;gap:9px}
  .flow-line{width:2px;height:18px;margin:auto}
  .flow-line::after{content:'↓';right:-7px;top:7px}
  .login-flow-node{min-height:68px}
  .login-flow-panel{margin:14px 12px 16px;padding:15px}
  .login-flow-head{padding:18px 16px 13px}
}